Question

我有一个select元素，并使用第一个option作为选择字段的标题。我想知道当选择第一个选项时，是否有办法使select字段内的文本变灰。这只能在JS中完成，还是有CSS解决方案？

我尝试更改第一个option的样式，但只在我激活下拉菜单时更改了文字的颜色。

<select>
  <option>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

Answer 1

这是一个更现代的解决方案，因此它不是第一个选项特有的，而是一个无效的选项，并且不需要JS只显示标题/占位符选项为灰色，而休息似乎正常。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

：select上的无效选择器仅适用于选项如果需要选择框，并且所选选项的值为空，因此，您可以像设置文本框的占位符文本一样设置样式。

将其设置为禁用会阻止用户在选择选项中选择它，并将其设置为隐藏隐藏选择选项。

这是我的CodePen demo，它探索了其他选择框样式，并在浅色背景下显示了这个样式。

Answer 2

2017年9月编辑

你应该看看Tessa's answer below，因为它只是CSS而且现在好多了！这个答案现在差不多已经有5年了，所以情况有所改变。我保留原来的答案仅供参考。

原始答案

我更接近你需要的东西：

你需要对整个SELECT进行灰化（这样当它关闭时，它是灰色的），然后“un-grey”所有的OPTION（把它们变黑）和灰色的第一个孩子。像这样：

<强> CSS

select
{
    color: #ccc;
}
option
{
    color: #000;
}
option:first-child
{
    color: #ccc;
}

<强> 修改 所以编辑的代码是：

<强> HTML

<select onchange="changeMe(this)">
  <option selected disabled>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

<强>的Javascript

<script type="text/javascript">
    function changeMe(sel)
    {
      sel.style.color = "#000";              
    }
</script>

我更新了jsFiddle。你可以在这里查看：http://jsfiddle.net/s5Xy2/5/

请注意，我还更改了HTML部分，因为我认为您要使用“禁用”属性（因此，您还必须添加“selected”属性）。

如果您仍然需要纯CSS代码，请访问：http://jsfiddle.net/s5Xy2/4/

Answer 3

您可以将代码编辑为我的代码：

<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>

此代码将第一项设置为灰色。

我希望能帮到你......

Answer 4

这是我的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>

修改选择所以只有第一个是灰色的

4 个答案:

2017年9月编辑

原始答案