WEBTODESIGN

HTMLのselectタグで「選択してください」という初期値を設定する

HTMLのselectタグで、「選択してください」という選択できない初期値を設定する方法です。

selectの基本形

selectの基本形は以下です。

<select name="select">
    <option value="1">1</option>
    <option value="1">2</option>
    <option value="1">3</option>
</select>

こちらに選択できない初期値を追加してみます。

hidden属性を追加する

「選択してください」をoptionタグで追加したら、valueの代わりにhidden属性を追加します。

<select name="select">
    <option hidden>選択してください</option>
    <option value="1">1</option>
    <option value="1">2</option>
    <option value="1">3</option>
</select>

たったこれだけで選択できない初期値が追加できました！

初期値の色を変える

初期値の色をグレーにしたい場合があります。この場合はCSSでselectタグに色を設定します！

select{
    color: #CCC;
}

optionタグに色を設定するわけではないことに注意してください👍

RECOMMENDATION

NEWEST