我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰(因此单击箭头后):
option:first {
color: #999;
}
问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。
使用此选项会导致所选值始终为灰色(即使在选择实际选项后):
select {
color: #999;
}
我刚刚偶然发现了这个问题,下面是Firefox和Chrome的工作原理(至少):
<style>选择:无效{颜色:灰色;}</style><表单><选择所需><option value=“”禁用所选隐藏>请选择</选项><option value=“0”>通电时打开(大多数阀门都这样做)</option><option value=“1”>通电时关闭,断电时自动打开</option></选择></form>
禁用选项可停止使用鼠标和键盘选择<option>,而仅使用“display:none”允许用户仍然通过键盘箭头进行选择。“display:none”样式只是让列表框看起来“不错”。
注意:在“占位符”选项上使用空值属性允许验证(必需属性)绕过“占位符”,因此如果选项未更改,但是必需的,则浏览器应提示用户从列表中选择一个选项。
更新(2015年7月):
确认此方法在以下浏览器中有效:
谷歌Chrome-v.43.0.2357.132Mozilla Firefox-第39.0版Safari-v.8.0.7(占位符在下拉列表中可见,但不可选择)Microsoft Internet Explorer-v.11(占位符在下拉列表中可见,但不可选择)Project Spartan-v.15.10130(占位符在下拉列表中可见,但不可选择)
更新(2015年10月):
我删除了style=“display:none”,改为支持广泛的HTML5属性hidden。隐藏元素具有与显示类似的特性:在Safari、Internet Explorer和(Project Spartan需要检查)中都没有,在下拉列表中该选项可见,但不可选择。
更新(2016年1月):
当需要select元素时,它允许使用:invalid CSS伪类,该类允许您在select元素处于“占位符”状态时设置其样式。:由于占位符选项中的值为空,因此此处无效。
设置值后,将删除:invalid伪类。如果您愿意,也可以选择使用:valid。
大多数浏览器都支持这个伪类。Internet Explorer 10及更高版本。这对于自定义样式的选择元素最有效;在某些情况下,例如(Mac在Chrome/Safari中),您需要更改选择框的默认外观,以便显示某些样式,例如背景色和颜色。您可以在developer.mozilla.org上找到一些关于兼容性的示例和更多信息。
Chrome中的原生元素外观Mac:
在Chrome中使用更改的边框元素Mac:
纯JavaScript解决方案,允许用户在未选择值时仅通过禁用选项来重置字段。
我不喜欢仅仅禁用该选项的方式(尽管这确实是一个非常简单的解决方案)。但我需要重置选择框。所以我在下面创建了一个简单的JavaScript解决方案。
在HTML代码中,您只需执行以下操作:
<select name="animal">
<option class="placeholder">Animal</option>
<option value="1">Mouse</option>
<option value="2">Cat</option>
</select>
要实现这一点,只需在HTML正文末尾的脚本块中包含以下代码即可。
(function () {
const selectboxPlaceholderOptions = document.querySelectorAll('select option.placeholder');
function selectBoxChange(event) {
const select = event.srcElement;
const placeholderOption = event.srcElement.querySelector('option.placeholder');
if (!placeholderOption)
return;
if (!select.value || select.value === '') {
placeholderOption.disabled = true;
placeholderOption.textContent = placeholderOption.dataset['placeholderText'];
} else {
placeholderOption.disabled = false;
placeholderOption.textContent = '';
}
}
for (let i = 0; i < selectboxPlaceholderOptions.length; i++) {
const option = selectboxPlaceholderOptions[i];
const select = option.parentElement;
option.value = '';
option.disabled = true;
option.dataset['placeholderText'] = option.textContent;
select.addEventListener("change", selectBoxChange);
}
})();
将类占位符分配给占位符选项后,一切都完成了。JavaScript与页面加载结束前可用的每个选择框一起工作。