Html 修改选择所以只有第一个是灰色的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13694271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modify Select So Only The First One Is Gray
提问by Jon
I have a selectelement and am using the first optionas the title of the select field. I am wondering if there is a way to gray out the text inside the selectfield when the first option is selected. Can this only be done in JS, or is there a CSS solution?
我有一个select元素，并使用第一个option作为选择字段的标题。我想知道是否有办法在select选择第一个选项时使字段内的文本变灰。这只能在 JS 中完成，还是有 CSS 解决方案？
I have tried changing the style of the first optionbut that only changes the colour of the text when I activate the dropdown menu.
我曾尝试更改第一个的样式，option但这只会在我激活下拉菜单时更改文本的颜色。
<select>
<option>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
采纳答案by Fábio Duque Silva
September 2017 edit
2017 年 9 月 编辑
You should take a look at Tessa's answer below, since it's CSS only and much better now! This answer is almost 5 years old now, so things have changed a bit. I'm keeping the original answer just for reference.
你应该看看下面 Tessa 的回答，因为它只是 CSS，现在好多了！这个答案现在已经快 5 年了，所以事情发生了一些变化。我保留原始答案仅供参考。
Original answer
原答案
I am closer to what you need:
我更接近你所需要的：
You need to gray the entire SELECT (so that when it's closed, it is gray), then "un-gray" all the OPTION's (put them black) and gray the first-child. Something like this:
您需要将整个 SELECT 灰色（这样当它关闭时，它是灰色的），然后“取消灰色”所有 OPTION 的（把它们变成黑色）并将第一个孩子灰色。像这样的东西：
CSS
CSS
select
{
color: #ccc;
}
option
{
color: #000;
}
option:first-child
{
color: #ccc;
}
EDITSo the edited code is:
编辑所以编辑后的代码是：
HTML
HTML
<select onchange="changeMe(this)">
<option selected disabled>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
Javascript
Javascript
<script type="text/javascript">
function changeMe(sel)
{
sel.style.color = "#000";
}
</script>
I've update jsFiddle. You can check it here: http://jsfiddle.net/s5Xy2/5/?
我已经更新了 jsFiddle。你可以在这里查看：http: //jsfiddle.net/s5Xy2/5/？
Notice that I've also changed the HTML part, because I think you want to use the "disabled" attribute (and because of that, you'll have to add the "selected" attribute also).
请注意，我还更改了 HTML 部分，因为我认为您想使用“禁用”属性（因此，您还必须添加“选择”属性）。
If you still want the pure CSS code, it's here: http://jsfiddle.net/s5Xy2/4/
如果你仍然想要纯 CSS 代码，它在这里：http: //jsfiddle.net/s5Xy2/4/
回答by Tessa
Here is a more modern solution so it's not specific to the first option, but rather an invalidoption and requires no JS to show only the title/placeholder option as grey whereas the rest appear normal.
这是一个更现代的解决方案，因此它不是特定于第一个选项，而是一个无效选项，并且不需要 JS 仅将标题/占位符选项显示为灰色，而其余选项则显示正常。
select,
select option {
color: #000000;
}
select:invalid,
select option[value=""] {
color: #999999;
}
label {
display: block;
margin: 16px 0;
}
/*Added for browser compatibility*/
[hidden] {
display: none;
}<label>
Invalid option cannot be selected and is hidden from the user in the dropdown.
<select required>
<option value="" selected disabled hidden>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
</label>
<label>
Invalid option cannot be selected, but is not hidden from the user in the dropdown.
<select required>
<option value="" selected disabled>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
</label>
<label>
Invalid option can be selected and is not hidden from the user in the dropdown.
<select required>
<option value="" selected>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
</label>The :invalid selector on the select only works on an option if the select box is required, and the selected option's value is empty, so you can style it as you would a text box's placeholder text.
选择器上的 :invalid 选择器仅适用于需要选择框的选项，并且所选选项的值为空，因此您可以将其设置为文本框占位符文本的样式。
Setting it to disabled prevents the user from selecting it in the select options, and setting it to hidden hides it from the select options.
将其设置为禁用可防止用户在选择选项中选择它，将其设置为隐藏可将其从选择选项中隐藏。
Here is my CodePen demothat explores additional select box styles and shows this one in action on a light background.
这是我的CodePen 演示，它探索了其他选择框样式并在浅色背景上显示了这个样式。
回答by paulld
Inspired from Fábio Silva's solution, a very cool solution using AngularJS:
灵感来自 Fábio Silva 的解决方案，这是一个使用AngularJS的非常酷的解决方案：
select {
color: #ccc;
}
option {
color: #aaa;
}
option:first-child {
color: #ccc;
}
select.ng-dirty {
color: #aaa;
}
回答by A1Gard
You can edit your code to my code :
您可以将代码编辑为我的代码：
<select id="drop">
<option>Please select your favourite fruit</option>
<option>Apple</option>
<option>Banana</option>
</select>
<style type="text/css">
#drop :first-child
{
color:gray;
}
</style>
This code set first item color gray .
此代码设置第一项颜色为 gray 。
i hope help you...
我希望能帮助你...
回答by squarecandy
Here's my 2018 version that combines some of the other answers and a bit of my own js. There does not seem to be a solution that works w/o javascript if you want the first element gray when it is closed.
这是我的 2018 版本，它结合了其他一些答案和我自己的一些 js。如果您希望第一个元素在关闭时为灰色，则似乎没有一个解决方案可以在没有 javascript 的情况下工作。
var grayout = document.getElementsByClassName('grayout');
var grayOutSelect = function() {
if ( this.value === "" ) {
this.classList.add('gray');
} else {
this.classList.remove('gray');
}
};
for (var i = 0; i < grayout.length; i++) {
grayout[i].addEventListener('change', grayOutSelect);
if ( grayout[i].value === "" ) {
grayout[i].classList.add('gray');
} else {
grayout[i].classList.remove('gray');
}
}select {
color: #333;
}
select.gray {
color: #aaa;
}
/* Optional styles for when the select is open. Doesn't work on all browsers */
option {
color: black;
}
.grayout option:first-child {
color: gray;
}
/* Extra / just to make the demo look nice */
body {
background: #ddd;
padding: 30px;
font-size: 20px;
}
select {
margin: 0;
vertical-align: top;
padding: 5px 60px 5px 8px;
background-color: #fff;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4b/Feather-arrows-chevron-down.svg');
background-position: 97% center;
background-position: right 8px center;
background-repeat: no-repeat;
background-size: 18px;
border: 2px solid #999;
border-radius: 3px;
-webkit-appearance: button;
-webkit-border-radius: 3px;
-webkit-padding-end: 30px;
-webkit-padding-start: 8px;
-webkit-user-select: none;
-moz-appearance: none;
font-size: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: border 300ms;
}<p>main example</p>
<p>
<select class="grayout">
<option value="">Please select your favourite fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
</p>
<p>one of the real options is selected</p>
<p>
<select class="grayout">
<option value="">Please select your favourite computer</option>
<option value="apple" selected>Apple</option>
<option value="c64">Commodore 64</option>
<option value="gateway2000">Gateway 2000</option>
</select>
</p>
<p>the grayout style is not applied here</p>
<p>
<select>
<option value="">Please select your favourite insult</option>
<option value="jerk">Jerk</option>
<option value="ahole">A**hole</option>
<option value="shakespeare">Thou damned and luxurious mountain goat</option>
</select>
</p>