我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
为选择元素输入[type=“text”]样式占位符
以下解决方案模拟占位符，因为它与input[type=“text”]元素相关：
$（'.example'）.change（函数（）{$（this）.css（'color'，$（this）.val（）=='？'#999' : '#555');});.示例{颜色：#999；}.example>选项{颜色：#555；}.example>选项[value=“”]{颜色：#999；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“example”><option value=“”>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>
其他回答
如果使用的是Angular，请执行以下操作：
<选择><option[ngValue]=“undefined”disabled selected>选择您的选项</option><option[ngValue]=“hurr”>Durr</option></选择>
我不满足于仅使用HTML/CSS的解决方案，所以我决定使用JavaScript创建一个自定义选择。
这是我在过去30分钟里写的，因此可以进一步改进。
您所要做的就是创建一个简单的列表，其中包含很少的数据属性。代码自动将列表转换为可选择的下拉列表。它还添加了一个隐藏的输入以保存所选值，因此可以在表单中使用。
输入：
<ul class="select" data-placeholder="Role" data-name="role">
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li data-value="user">User</li>
</ul>
输出：
<div class="ul-select-container">
<input type="hidden" name="role" class="hidden">
<div class="selected placeholder">
<span class="text">Role</span>
<span class="icon">▼</span>
</div>
<ul class="select" data-placeholder="Role" data-name="role">
<li class="placeholder">Role</li>
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li data-value="user">User</li>
</ul>
</div>
假定为占位符的项的文本将灰显。占位符是可选的，以防用户想要恢复其选择。同样使用CSS，select的所有缺点都可以被克服（例如，选项的样式无法设置）。
//帮助程序功能可更快/更轻松地创建元素// https://github.com/akinuri/js-lib/blob/master/element.jsvar elem=函数（tagName、属性、子项、isHTML）{让父母；if（tagName类型==“string”）{parent=document.createElement（tagName）；}else if（HTMLElement的tagName实例）{parent=tagName；}if（属性）{for（属性中的let属性）{parent.setAttribute（属性，属性[attribute]）；}}var isHTML=isHTML||null；if（children || children==0）{elem.append（父级、子级、isHTML）；}返回父项；};elem.append=函数（父级、子级、isHTML）{if（HTMLTextAreaElement的父实例|| HTMLInputElement的父示例）{if（文本的子实例||typeof children==“string”||typeofchildren===“number”）{parent.value=子项；}else if（数组的子实例）{children.forEach（函数（child）{elem.append（父级，子级）；});}else if（typeof children==“function”）{elem.append（父级，子级（））；}}其他{if（HTMLElement的子实例||文本的子实例）{parent.appendChild（children）；}否则如果（typeof children==“string”| | typeof children==“number”）{if（isHTML）{parent.innerHTML+=子级；}其他{parent.appendChild（document.createTextNode（children））；}}else if（数组的子实例）{children.forEach（函数（child）{elem.append（父级，子级）；});}else if（typeof children==“function”）{elem.append（父级，子级（））；}}};//初始化页面上的所有选择$（“ul.select”）.each（函数）{var parent=this.parentElement；var refElem=this.nextElementSibling；var container=elem（“div”，｛“class”：“ul select container”｝）；var hidden=elem（“input”，｛“type”：“hidden”，“name”：this.dataset.name，“class”：“隐藏”｝）；var selected=elem（“div”，｛“class”：“selected placeholder”｝[elem（“span”，｛“class”：“text”｝，this.dataset.placeholder），elem（“span”，｛“class”：“icon”｝，“▼；”，true），]);var placeholder=elem（“li”，｛“class”：“placeholder”｝，this.dataset.placeholder）；this.insertBefore（占位符，this.children[0]）；container.appendChild（隐藏）；container.appendChild（选中）；container.appendChild（this）；parent.insertBefore（容器，refElem）；});//使用所选选项更新必要的元素$（“.ul选择容器ul li”）.on（“单击”，函数（）{var text=this.innerText；var value=this.dataset.value | |“”；var selected=this.parentElement.previousElementSibling；var hidden=selected.previousElementSibling；hidden.value=selected.dataset.value=值；selected.children[0].innerText=文本；if（this.classList.incontains（“占位符”））{selected.classList.add（“占位符”）；}其他{selected.classList.remove（“占位符”）；}selected.parentElement.classList.remove（“可见”）；});//打开选择下拉列表$（“.ul select container.selected”）.on（“单击”，函数（）{if（this.parentElement.classList.incontains（“可见”））{this.parentElement.classList.remove（“可见”）；}其他{this.parentElement.classList.add（“可见”）；}});//焦点丢失时关闭选择$（文档）.on（“点击”，功能（e）{var container=$（e.target）最近（“.ul select container”）；如果（container.length==0）{$（“.ul select container.visible”）.removeClass（“可见”）；}});.ul选择容器{宽度：200px；显示：表格；位置：相对；边距：1em 0；}.ul-select-container.visible ul{显示：块；填充：0；列表样式：无；边距：0；}.ul选择容器ul{背景色：白色；边框：1px实心hsla（0，0%，60%）；边框顶部：无；-webkit用户选择：无；显示：无；位置：绝对；宽度：100%；z指数：999；}.ul选择容器ul li{衬垫：2px 5px；}.ul选择容器ul li.placeholder{不透明度：0.5；}.ul选择容器ul li：悬停{背景色：闪避蓝；颜色：白色；}.ul选择容器ul li占位符：悬停{背景色：rgba（0、0、0和.1）；颜色：初始；}.ul选择容器。已选择{背景色：白色；填充：3px 10px 4px；衬垫：2px 5px；边框：1px实心hsla（0，0%，60%）；-webkit用户选择：无；}.ul选择容器。已选择{显示：柔性；调整内容：间距；}.ul选择容器.selected.placeholder.text{颜色：rgba（0、0、0和.5）；}.ul选择容器已选择图标{字体大小：.7em；显示：柔性；对齐项目：居中；不透明度：0.8；}.ul选择容器：悬停.selected{边框：1px实心hsla（0，0%，30%）；}.ul选择容器：悬停选定图标{不透明度：1；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><ul class=“select”数据占位符=“Role”数据名称=“Role”><li data value=“admin”>管理员</li><li data value=“mod”>主持人</li><li data value=“user”>用户</li></ul><ul class=“select”数据占位符=“Sex”数据名称=“Sex”><li data value=“male”>男性</li><li数据值=“female”>女性</li></ul>
更新：我改进了这一点（使用向上/向下/输入键进行选择），稍微整理了一下输出，并将其转换为对象。电流输出：
<div class="li-select-container">
<input type="text" readonly="" placeholder="Role" title="Role">
<span class="arrow">▼</span>
<ul class="select">
<li class="placeholder">Role</li>
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li data-value="user">User</li>
</ul>
</div>
初始化：
new Liselect(document.getElementsByTagName("ul")[0]);
进一步检查：JSFiddle，GitHub（已重命名）。
更新：我已经重写了一遍。我们可以只使用select，而不使用列表。这样，即使没有JavaScript（如果禁用），它也可以工作。
输入：
<select name="role" data-placeholder="Role" required title="Role">
<option value="admin">Administrator</option>
<option value="mod">Moderator</option>
<option>User</option>
</select>
new Advancelect(document.getElementsByTagName("select")[0]);
输出：
<div class="advanced-select">
<input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
<span class="arrow">▼</span>
<ul>
<li class="placeholder">Role</li>
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li>User</li>
</ul>
</div>
JSFiddle，GitHub。
您可以在不使用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>
基于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></选择>
我希望SELECT为灰色，直到选中，因此对于这段HTML：
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
我添加了以下CSS定义：
select { color: grey; }
select:valid { color: black; }
它在Chrome/Safari和其他浏览器中都能正常工作，但我还没有检查。
