我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰(因此单击箭头后):
option:first {
color: #999;
}
问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。
使用此选项会导致所选值始终为灰色(即使在选择实际选项后):
select {
color: #999;
}
不需要任何JavaScript或CSS,只需要三个属性:
<select>
<option selected disabled hidden>Default Value</option>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
它根本没有显示选项;它只是将选项的值设置为默认值。
但是,如果您只是不喜欢与其他占位符颜色相同的占位符,您可以这样内联修复它:
<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>
<body onload="document.getElementById('mySelect').selectedIndex = 0">
<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'" style="color: gray; width: 150px;">
<option value="" hidden>Select your beverage</option> <!-- placeholder -->
<option value="water" style="color:black" >Water</option>
<option value="milk" style="color:black" >Milk</option>
<option value="soda" style="color:black" >Soda</option>
</select>
</body>
</html>
显然,您可以将函数和至少select的CSS分离为单独的文件。
注意:onload函数纠正了刷新错误。