如何为“选择框”制作占位符？

Question

如何为“选择框”制作占位符？我使用占位符作为文本输入，这很好。但是我也想用占位符作为我的选择框。当然，我可以使用以下代码：<select>     <option value="">Select your option</option>     <option value="hurr">Durr</option></select>但是“选择你的选项”是黑色的，而不是亮灰色的。所以我的解决方案可能是基于CSS的。jQuery也很好。这只会使下拉列表中的选项变得灰色(因此在单击箭头之后)：option:first {     color: #999;}编辑：问题是：人们如何在选择框中创建占位符？但它已经被回答了，干杯。使用这个结果，所选值总是灰色的(即使在选择了一个真正的选项之后)：select {     color:#999;}

Answer 1

非CSS-没有javascript/jQuery答案如何？

<select>

    <option value="" disabled selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

Answer 2

对于所需的字段，现代浏览器中有一种纯CSS解决方案：

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>