セレクトボックスの1つ目をplaceholderっぽく見せる方法

selectタグにはplaceholder属性が存在しません。
なので、<select placeholder=”hoge”></select>と書いても何も表示されないのです。
また、CSSの擬似要素::placeholderも使用することができません。

placehoplderっぽく見せる方法としては、①CSSのみで完結する方法と②JSを用いて操作する方法がありますが、今回は①に絞って紹介します。

CSSだけで完結する方法では、セレクトボックスが必須項目の場合でしか使えませんが、簡単に設定できるのでおすすめです。

point① option要素の1つ目をplaceholderとして扱う

selectタグはplaceholder属性が存在しないので、option要素の1つ目を擬似的にplaceholder要素として扱います。

下記のようにHTMLを書きます。1つ目のoption要素はvalueの中身を空にして下さい。

<select required>
    <option value="">選択してください</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

そうするとこんな感じのセレクトボックスが出来上がります。

point② :invalidを使ってスタイルをあてる

:invalidはCSSの疑似クラスで、inputタグやoptionタグで無効な値（valueが空の場合も含む）が入っているときに限定してスタイルをあてることができます。

なので先ほどのHTMLにclassを追加し、スタイルをあててみるとplaceholderっぽく見せたい要素のみ色を変えることができます。

<style>
    .selectbox {color: #000}
    .selectbox:invalid{color: #ccc}
</style>

<select class="selectbox" required>
    <option value="">選択してください</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

実際に書いてみたものがこちら↓

簡単にできましたね！今まで諦めていた方もぜひ参考にしてみてください！