我有一个select
元素,我使用第一个option
作为选择字段的标题。我想知道是否有一种方法可以在选择第一个选项时使select
字段中的文本变灰。这只能在JS中完成吗?或者有CSS解决方案吗?
我试过改变第一个option
的风格,但这只会改变文本的颜色,当我激活菜单。
<select>
<option>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
字符串
5条答案
按热度按时间mwg9r5ms1#
这里是一个更现代的解决方案,所以它不是特定于第一个选项,而是一个 invalid 选项,并且不需要JS来显示只有标题/占位符选项为灰色,而其余的显示正常。
个字符
select上的
:invalid
选择器仅在选择框是必需的 * 并且 * 所选选项的值为空时才对选项起作用,因此您可以将其样式设置为文本框的占位符文本。将其设置为
disabled
可以防止用户在选择选项中选择它,而将其设置为hidden
则可以在选择选项中隐藏它。这是我的CodePen demo,它探索了其他的选择框样式,并在浅色背景上显示了这一个。
uujelgoq2#
2017年9月编辑
你应该看看Tessa's answer below,因为它只是CSS,现在好多了!这个答案已经快5年了,所以事情已经改变了一点。我保留原来的答案只是为了参考。
原始答案
我更接近你所需要的:
你需要灰显整个SELECT(这样当它关闭时,它是灰色的),然后“un-gray”所有的OPTION(把它们变成黑色)和灰显第一个子元素。类似这样:
CSS
字符串
超文本标记语言
型
JavaScript
型
我更新了jsFiddle,你可以在这里查看:http://jsfiddle.net/s5Xy2/5/
请注意,我还更改了HTML部分,因为我认为您希望使用“disabled”属性(因此,还必须添加“selected”属性)。
如果你仍然想要纯CSS代码,它在这里:http://jsfiddle.net/s5Xy2/4/
erhoui1w3#
灵感来自Fábio Silva的解决方案,一个非常酷的解决方案,使用AngularJS:
字符串
htrmnn0y4#
这是我2018年的版本,它结合了一些其他的答案和一些我自己的js。如果你想让第一个元素在关闭时变灰,似乎没有一个解决方案可以在不使用JavaScript的情况下工作。
hkmswyz65#
您可以将您的代码编辑为我的代码:
字符串
此代码将第一个项的颜色设置为灰色。