css 修改选择,使只有第一个是灰色的

2izufjch  于 11个月前  发布在  其他
关注(0)|答案(5)|浏览(97)

我有一个select元素,我使用第一个option作为选择字段的标题。我想知道是否有一种方法可以在选择第一个选项时使select字段中的文本变灰。这只能在JS中完成吗?或者有CSS解决方案吗?
我试过改变第一个option的风格,但这只会改变文本的颜色,当我激活菜单。

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

字符串

mwg9r5ms

mwg9r5ms1#

这里是一个更现代的解决方案,所以它不是特定于第一个选项,而是一个 invalid 选项,并且不需要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;
}

个字符
select上的:invalid选择器仅在选择框是必需的 * 并且 * 所选选项的值为空时才对选项起作用,因此您可以将其样式设置为文本框的占位符文本。
将其设置为disabled可以防止用户在选择选项中选择它,而将其设置为hidden则可以在选择选项中隐藏它。
这是我的CodePen demo,它探索了其他的选择框样式,并在浅色背景上显示了这一个。

uujelgoq

uujelgoq2#

2017年9月编辑

你应该看看Tessa's answer below,因为它只是CSS,现在好多了!这个答案已经快5年了,所以事情已经改变了一点。我保留原来的答案只是为了参考。

原始答案

我更接近你所需要的:
你需要灰显整个SELECT(这样当它关闭时,它是灰色的),然后“un-gray”所有的OPTION(把它们变成黑色)和灰显第一个子元素。类似这样:

CSS

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

字符串

  • 编辑 * 所以编辑后的代码是:*
    超文本标记语言
<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部分,因为我认为您希望使用“disabled”属性(因此,还必须添加“selected”属性)。
如果你仍然想要纯CSS代码,它在这里:http://jsfiddle.net/s5Xy2/4/

erhoui1w

erhoui1w3#

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

select {
  color: #ccc;
}
option {
  color: #aaa;
}
option:first-child {
  color: #ccc;
}
select.ng-dirty {
  color: #aaa;
}

字符串

htrmnn0y

htrmnn0y4#

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

hkmswyz65#

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

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

字符串
此代码将第一个项的颜色设置为灰色。

相关问题