select要素にplaceholderを設定して、文字色を変える方法【jQuery】

お問い合わせフォームを実装するときなどに、selectタグを使用することがありますよね。

inputtextareaタグにはplaceholderを設定できるのですが、selectタグには設定することができません。

そこで今回の記事では、

  • selectplaceholder(ダミーの選択肢)を設定する
  • 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タグを用意します。

このとき、一番上のoptionvalueを空にして、初期値として表示したいテキストを入力します。

ここでは選択してくださいというテキストが入っていますが、これが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");
}

selectvalueが空ではない場合、つまりオプションが選択されている場合は、is-emptyクラスを削除します。

反対に、valueが空の場合はis-emptyクラスを付与します。

これで初期値、オプション選択時で文字色を切り替えることができました。

以上でjQueryの解説は終わりです。

【まとめ】select要素のoptionが初期値のときだけ文字色を変える方法【jQuery】

selectタグが初期値の場合・オプション選択時の場合で文字色を変える方法を紹介しました。

selectタグにはinputtextareaタグと違って、placeholder属性がありません。

なので、

  1. valueが空のoptionを用意し、placeholder用のテキストを入力
  2. placeholder用の文字色 / オプション選択時の文字色を指定したクラスを用意する
  3. jQueryでvalueが空かどうかを判別し、クラスを付与/削除する

という手順でplaceholderのように見せることができます。

inputtextareaplaceholderの文字色と合わせたいという場合によく使用するテクニックですので、ぜひ参考にしてみてください。

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次