html-select - html select 初期値 動的 - セレクト」ボックスのプレースホルダーを作るにはどうしたらいいですか?

HTML セレクトボックス / html / css / placeholder

テキスト入力にプレースホルダーを使用しており、うまくいっています。しかし、セレクトボックスにもプレースホルダーを使いたいと思っています。もちろん、このコードを使うこともできます。

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

これにより、ドロップダウンでオプションが灰色になるだけです(矢印をクリックした後の状態)。

option:first {
    color: #999;
}

また、これを使用すると、(本物のオプションを選択した後でも)選択された値が常にグレーになります。

select {
    color: #999;
}

Peter Mortensen



Answer #1
select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>