お問い合わせフォームを実装するときなどに、selectタグを使用することがありますよね。
inputやtextareaタグにはplaceholderを設定できるのですが、selectタグには設定することができません。
そこで今回の記事では、
selectにplaceholder(ダミーの選択肢)を設定するplaceholderの色と選択時の色を切り替える
これら2つを、jQueryを使って実装していきます。
selectタグの初期値をplaceholderっぽく見せたいという方は、ぜひこの方法を参考にしてみてください。
【実装DEMO】selectが初期値の時に文字色をグレーに、選択時は黒にする
以下に実装DEMOを用意しましたので、セレクトボックスを操作してみてください。
- 初期値のときは文字色がグレー
- 初期値以外を選択すると文字色が黒
上記が確認できたら、次でコード一式を紹介していきます。
【コピペ用】selectが初期値の時に文字色を変える実装コード
以下に今回の実装コード一式を用意しましたので、コピペしてお使いください。
jQueryを使用していますので、各自読み込んでください。
<select class="js-select" name="demo">
<option value>選択してください</option>
<option value="option-1">選択肢1</option>
<option value="option-2">選択肢2</option>
<option value="option-3">選択肢3</option>
</select>select {
color: black; /* option選択時の文字色 */
}
select.is-empty {
color: gray; /* placeholder(初期値)の文字色 */
}$(function () {
// 'js-select'クラスが付いている要素を全て取得
const select = $(".js-select");
// is-emptyクラスを付与
select.addClass("is-empty");
// selectのoptionを切り替え時
select.on("change", function () {
// option選択時
if ($(this).val() !== "") {
// is-emptyクラスを削除
$(this).removeClass("is-empty");
}
// placeholder選択時
else {
// is-emptyクラスを付与
$(this).addClass("is-empty");
}
});
});以上で実装コードの紹介は終わりです。
次で詳しく説明してきますので、気になる方は読み進めてください。
【解説】selectが初期値の時に文字色を変える実装コードの解説
ここからは、実装コードの解説をしていきます。
HTML
まずはHMTLから見ていきましょう。
<select class="js-select" name="demo">
<option value>選択してください</option>
<option value="option-1">選択肢1</option>
<option value="option-2">選択肢2</option>
<option value="option-3">選択肢3</option>
</select>まずselectタグに対して、js-selectクラスを付与します。
これはjQueryのセレクタで取得するために必要です。
次にoptionタグを用意します。
このとき、一番上のoptionのvalueを空にして、初期値として表示したいテキストを入力します。
ここでは選択してくださいというテキストが入っていますが、これがplaceholder(ダミーの選択肢)となります。
以上でHTMLは終わりです。
CSS
続いてはCSSを見てきましょう。
select {
color: black; /* option選択時の文字色 */
}
select.is-empty {
color: gray; /* placeholder(初期値)の文字色 */
}まずselectタグに対して、文字色を指定します。
ここではblackとしていますが、option選択時の文字色を各自指定してください。
次にselect.is-emptyに対して、placeholderの文字色を指定します。
このis-emptyクラスはjQueryで付け外しするので、ここでは気にしなくて大丈夫です。
jQuery
最後にjQueryのコードを見ていきましょう。
$(function () {
// 'js-select'クラスが付いている要素を全て取得
const select = $(".js-select");
// is-emptyクラスを付与
select.addClass("is-empty");
// selectのoptionを切り替え時
select.on("change", function () {
// option選択時
if ($(this).val() !== "") {
// is-emptyクラスを削除
$(this).removeClass("is-empty");
}
// placeholder選択時
else {
// is-emptyクラスを付与
$(this).addClass("is-empty");
}
});
});上から順番に説明していきます。
まず最初に、js-selectクラスがついた要素を取得します。
const select = $(".js-select");もしページ内の全てのselectに対して適用したい場合は、以下のようにクラスではなくタグを指定してもOKです。
const select = $("select");次に、選択した要素に対してis-emptyクラスを付与します。
select.addClass("is-empty");これでoption未選択(初期値)のときは、文字色がCSSで指定したplaceholderの色になります。
次に、ユーザーがselectタグの値を変更した際に発火するコードを指定していきます。
select.on("change", function () {
// selectの値が変更された時の処理
});selectタグの値が切り替わったかどうかは、changeイベントで判別することができますね。
placeholder選択時placeholder以外のoptionを選択時
上記の条件ごとにif文でis-emptyクラスをつけ外しします。
if ($(this).val() !== "") {
$(this).removeClass("is-empty");
} else {
$(this).addClass("is-empty");
}selectのvalueが空ではない場合、つまりオプションが選択されている場合は、is-emptyクラスを削除します。
反対に、valueが空の場合はis-emptyクラスを付与します。
これで初期値、オプション選択時で文字色を切り替えることができました。
以上でjQueryの解説は終わりです。
【まとめ】select要素のoptionが初期値のときだけ文字色を変える方法【jQuery】
selectタグが初期値の場合・オプション選択時の場合で文字色を変える方法を紹介しました。
selectタグにはinputやtextareaタグと違って、placeholder属性がありません。
なので、
valueが空のoptionを用意し、placeholder用のテキストを入力placeholder用の文字色 / オプション選択時の文字色を指定したクラスを用意する- jQueryで
valueが空かどうかを判別し、クラスを付与/削除する
という手順でplaceholderのように見せることができます。
inputやtextareaのplaceholderの文字色と合わせたいという場合によく使用するテクニックですので、ぜひ参考にしてみてください。
コメント