<select>要素の無効化に合わせて<label>要素にスタイル適用！
今日は、上司と「なるほどな！」となったことについて、ご紹介します！
セレクトボックスがdisabled属性により、無効・選択不可になったとき、対応させている<label>要素のスタイルを変更したい・適用したい時ってありませんか？
そんなときの対応についてまとめてみました。
具体的な対応方法
今回使用するコード
以下のような<select>要素と<label>要素を使用していきます。
<body>
<div class="selectBoxArea">
<select name="fruits" id="selectFruits">
<option value="">選択してください</option>
<option value="いちご">いちご</option>
<option value="パイナップル">パイナップル</option>
<option value="りんご">りんご</option>
<option value="ぶどう">ぶどう</option>
</select>
<label>セレクトボックス：</label>
</div>
</body>
.selectBoxArea {
display: flex;
flex-direction: column;
width: 50%;
margin: 0 auto;
}
.selectBoxArea select {
order: 1;
}
.selectBoxArea label {
order: 0;
}
<label>要素を<select>要素の後に配置してわざわざ、orderプロパティで位置を入れ替えています。
「最初から逆にしたら良いのでは？」と疑問を持つ方もいるかと思います。私も最初、思いました。
しかし、<select>要素がdisabledの状態に合わせて<label>要素のスタイルを適用するためには大事なポイントなんです。後でのお楽しみですね🎁
画面としてはこんな感じです。
①セレクトボックスを無効化(disabled)する。
まずは、セレクトボックスをdisabledにします。
めちゃくちゃ単純な話。<select>要素にdisabled属性を与えるだけ。
<select name="fruits" id="selectFruits" disabled>
<option value="">選択してください</option>
<option value="いちご">いちご</option>
<option value="パイナップル">パイナップル</option>
<option value="りんご">りんご</option>
<option value="ぶどう">ぶどう</option>
</select>
このとき、<label>要素が変化していないことを確認してください。
②disabledに合わせて<label>要素の文字色を変えてみる！
ここからが本題です！
セレクトボックスが無効・選択不可になっているのに合わせて、<label>要素の文字色も変えてみます！
<label>要素にはdisabled属性は与えられないので難しく感じられるかもしれないですが、CSSを使うと意外にも簡単に対応できてしまいます。
セレクトボックスがdisabledのとき、<label>要素の文字色を、そのdisabled状態のセレクトボックス内の文字と同じ色にしてみます。(rgb(170, 170, 170))
.selectBoxArea select:disabled + label {
color: rgb(170, 170, 170);
}
select:disabledで、<select>要素がdisabledのときの状態を示していることはわかるかと思います。
そのあとに、+で次(直後)にある同じレベルの要素を指定することができます。
最初に提示したHTMLを見返してみてください。<select>要素の次(直後)にある同じレベルの要素は、<label>要素ですよね。
つまり、disabledになっている<select>要素の次(直後)にある同じレベルの<label>要素に対してスタイル指定をしているのです！
これが、<select>要素と<label>要素をわざわざ逆に配置していた理由です。
このようにスタイルを当てた結果が以下です。
見事、disabledになっているのに合わせて、<label>要素にスタイルが適用されています！
やりたいことが実現できました！！
ちなみに、<select>要素からdisabled属性を取り除くと以下のようになり、最初の状態に戻っています。
おわりに
<select>要素がdisabledになっている状態と、それに対応した<label>要素を連動させてスタイル適用する方法について紹介してみました。
今回は、<select>要素を使いましたが、もちろん<input>要素でも使えます。
対応方法だけでなく、セレクタ(+)の勉強にもなりました！
お読み下さり、ありがとうございました！！
Discussion