50

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

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

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

5 回答 5

75

这是一个更现代的解决方案，因此它不是特定于第一个选项，而是一个无效选项，并且不需要 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>

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

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

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

于 2017-01-30T16:42:05.627 回答
42

2017年9月编辑

您应该看看下面的 Tessa 的答案，因为它只是 CSS，而且现在好多了！这个答案现在已经快 5 岁了，所以情况发生了一些变化。我保留原始答案仅供参考。

原始答案

我更接近你需要的东西：

您需要将整个 SELECT 变灰（这样当它关闭时，它是灰色的），然后“取消灰色”所有 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/ ​</p>

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

如果你仍然想要纯 CSS 代码，这里是：http: //jsfiddle.net/s5Xy2/4/

于 2012-12-04T17:10:08.060 回答
5

灵感来自 Fábio Silva 的解决方案，这是一个使用AngularJS的非常酷的解决方案：

select {
  color: #ccc;
}
option {
  color: #aaa;
}
option:first-child {
  color: #ccc;
}
select.ng-dirty {
  color: #aaa;
}
于 2015-08-13T14:17:12.260 回答
0

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

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

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

我希望能帮助你...

于 2012-12-04T00:51:51.643 回答
0

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

于 2018-11-28T05:36:48.083 回答