我在文本输入中使用占位符，效果很好。但我也希望在选择框中使用占位符。当然，我可以使用以下代码：
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰（因此单击箭头后）：
option:first {
color: #999;
}
问题是：人们如何在选择框中创建占位符？但这已经得到了回应，欢呼。
使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：
select {
color: #999;
}
当前回答
JavaScript中的另一种可能性：
$('body').on('change', 'select', function (ev){
if($(this).find('option:selected').val() == ""){
$(this).css('color', '#999');
$(this).children().css('color', 'black');
}
else {
$(this).css('color', 'black');
$(this).children().css('color', 'black');
}
});
JSFiddle公司
其他回答
这对我来说很好：
<select class="form-control">
<option value="" readonly="true" hidden="true" selected>Select your option</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
我不满足于仅使用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。
由于本主题中提供的答案之间的样式和功能不同，下表阐明了所提供的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 |
下面是一个工作示例，如何使用纯JavaScript实现这一点，该JavaScript处理第一次单击后的选项颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#myselect {
color: gray;
}
</style>
</head>
<body>
<select id="myselect">
<option disabled selected>Choose Item
</option>
<option>Item 1
</option>
<option>Item 2
</option>
<option>Item 3
</option>
</select>
<script>
// Add event listener to change color in the first click
document.getElementById("myselect").addEventListener("click", setColor)
function setColor()
{
var combo = document.getElementById("myselect");
combo.style.color = 'red';
// Remove Event Listener after the color is changed at the first click
combo.removeEventListener("click", setColor);
}
</script>
</body>
</html>
以下解决方案也适用于Firefox，无需任何JavaScript：
选项[默认值]{显示：无；}<选择><option value=“”默认选择>选择您的年龄</option><option value=“1”>1</option><option value=“2”>2</option><option value=“3”>3</option><option value=“4”>4</option></选择>
