我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
我喜欢这个被接受的解决方案，而且它在没有JavaScript的情况下工作得很好。
我只想补充一下，我是如何对一个受控选择的React组件采用这个答案的，因为我花了几次时间才弄清楚。合并react select并使用它将非常简单，但除非您需要这个存储库提供的惊人功能，而我不需要这个功能，否则就不需要在我的捆绑包中添加更多的KB。注意，react select通过各种输入和html元素的复杂系统处理select中的占位符。
在React中，对于受控组件，不能将所选属性添加到选项中。React通过select本身的value属性以及一个更改处理程序来处理select的状态，其中值应该与选项本身中的一个value属性匹配。
例如
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
{options}
</select>
既然将所选属性添加到其中一个选项中是不正确的，而且实际上会引发错误，那么该怎么办？
只要你想一想，答案很简单。既然我们希望我们的第一个选项被选中、禁用和隐藏，我们需要做三件事：
将隐藏和禁用的属性添加到第一个定义的选项。将第一个选项的值设置为空字符串。将select的值初始化为空字符串。
state = { selectValue = "" } // State or props or their equivalent
// In the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
<option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
{renderOptions()}
</select>
现在，您可以按照上面的指示（或通过className，如果您愿意）设置选择的样式。
select:invalid { color: gray; }
其他回答
基于Albireo的响应，该版本不使用jQuery，CSS的特异性更好。
const triggerEvent=（el，eventName）=>{let event=document.createEvent（'HTMLEvents'）event.initEvent（eventName，true，false）el.dispatchEvent（事件）}let select=document.querySelector（'.placeholder select'）select.addEventListener（'change'，（e）=>{e.target.classList[e.target.value==0？'add'：'remove']（'empty'）})triggerEvent（选择，“更改”）占位符选择选项{颜色：#000000；}占位符选择选项：第一个子项{颜色：#444444；字体样式：斜体；字号：粗体；}.占位符-选择为空{颜色：#7F7F7F；}<select class=“placeholder select”><option value=“0”selected=“selected”>选择</选项><option value=“1”>有些东西</option><option value=“2”>其他内容</option><option value=“3”>另一个选项</option></选择>
我看到了正确答案的迹象，但要将所有答案结合起来，这将是我的解决方案：
选择{颜色：灰色；}期权{颜色：黑色；}选项[默认值]{显示：无；}<选择><option value=“”默认选择>选择您的选项</option><option value=“hurr”>Durr</option></选择>
HTML中有Cool属性，您可以使用它为select属性创建占位符在我的情况下，我使用以下代码，您可以根据您的要求更改它
<select ref={relationship} required className="sellertype">
<option value="" disabled selected hidden>Select Your Seller Type</option>
<option value="1">Importer</option>
<option value="2">Exporter</option>
<option value="3">Local Seller</option>
<option value="4">Local Buyer</option>
</select>
现在“选择卖家类型”将作为占位符
您可以在不使用JavaScript和仅使用HTML的情况下执行此操作。您需要将默认的select选项设置为disabled=“”和selected=“”，并选择所需的标记=“”。浏览器不允许用户在未选择选项的情况下提交表单。
<form action="" method="POST">
<select name="in-op" required="">
<option disabled="" selected="">Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="submit" value="Submit">
</form>
由于本主题中提供的答案之间的样式和功能不同，下表阐明了所提供的HTML、HTML+CSS和HTML+CSS+Javascript解决方案的样式和适用的表单逻辑。
我不得不使用代码格式，因为出于某种原因，标记中不允许使用表。将使用代码段提供一个HTML表来解决表限制。
我将这篇文章标记为社区维基，这样任何人都可以详细介绍新的文章，但请将JQuery、React、Angular、CoffeeScript等添加到另一篇文章中，以保持此表的简单。
| Technologies | Styling |
Post | CSS | Java- | Select: Placeholder | Select: valid option | Option: placeholder | Option: valid option |
ID | | script | Color | Validation | Color | Required | Visibility | Selectable | Color | Cond. formatting | Color | Cond. formatting |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
41167307 | No | No | Black | Invalid | Black | Yes | Visible | No | Grey | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50200912 | No | No | Black | Valid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5859221 | No | No | Black | Valid | Black | No | Visible | No | Grey | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
38120777 | No | No | Black | Valid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
54860799 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
52661024 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | No | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
8442831 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | No | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
29806043 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
61966461 | Yes | No | Grey | Invalid | Black | Yes | Invisible | N/A | N/A | select:valid{visible} | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
44406771 | Yes | No | Grey | Invalid | Grey | No | Visible | No | Grey | No | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
40603035 | Yes | No | Black | Valid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
22994211 | Yes | No | Grey | Valid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
21722343 | Yes | No | Grey | Valid | Grey | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
48960650 | Yes | Yes | Grey | Invalid | Black | No | Invisible | N/A | N/A | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5805194 | Yes | Yes | Grey | Valid | Black | No | Visible | Yes | Black | No | Black | No |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50840409 | Yes | Yes | Grey | Valid | Black | Yes | Visible | Yes | Grey | No | Black | No |
