更改默认选项的颜色在选择

我想自定义select，但我不能改变使用CSS的default选项的颜色。更改默认选项的颜色在选择

我试图使用.choose-flat__select option[default]和.choose-flat__select option:first-child，但它没有帮助。

而且，我试图使用jQuery来改变它：

$("#year-ready").find("option:first").attr("default", true).css('color', 'gray');

，但没有成功。

是否可以使用CSS来更改颜色？

UPDATE：

我认为描述有点不正确。我想这default选项（在我的情况“年...”）有gray的颜色，当它被选中：，但如果我选择其他项目，他们应该有black颜色：

来源

2016-05-30 Ilya Z.

据我所知'default'不是HTML属性。 –

据我了解，你想更改所选选项的颜色。如果是，那么尝试下面的CSS。

.choose-flat__select 
{ 
    color: yourColorCode; 
}

FIDDLE DEMO HERE

UPDATE

根据您的更新问题，您可以通过使用Javascript做到这一点。

$("#year-ready").change(function() { 
    var val = $(this).val(); 
    if(val == yourDefaultValue) 
    { 
     $(this).addClass("default"); 
    } 
    else 
    { 
     $(this).removeClass("default"); 
    } 
});

并添加风格在你的CSS

.default 
{ 
    color: gray; 
}

UPDATED FIDDLE HERE

来源

2016-05-30 12:28:10

谢谢！它适合我，但据我所知，不可能只用CSS做？ –

你可以在'select'处加上'required'。请点击此处：http://jsfiddle.net/t3nv0nzz/ –

非常感谢！ –

您可以使用此代码：

<select id="year-ready" name="" class="choose-flat__select"> 
    <option selected disabled>Year...</option> 
    <option>2017</option> 
    <option>2018</option> 
    <option>2019</option> 
    <option>2020</option> 
    <option>2021</option> 
</select>

如果你不想显示的默认设置它隐藏像这样：

<option hidden selected disabled>Year...</option>

如果你想给很多不同的颜色，你可以给你的选项一些类。

<option class="green" disabled selected>Year...</option> 
<option class="red">2017</option>

Fiddle Example here

来源

2016-05-30 12:36:59

更改默认选项的颜色在选择

回答

相关问题