在select中更改默认选项的颜色

Question

我正在尝试自定义select，但我无法使用css更改default选项的颜色。

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

请参阅示例：https://jsfiddle.net/1v76mvo7/

另外，我尝试使用jQuery更改它：

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

但未成功。

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

更新

我认为这描述有点不正确。我希望default选项（在我的情况下为'Year ...'）在选中时为gray颜色：，但如果我选择其他选项，则应black颜色：

Answer 1

据我所知，您想要更改所选选项的颜色。如果是，那么尝试以下css。

.choose-flat__select
{
  color: yourColorCode;
}  

FIDDLE DEMO HERE

<强>更新

根据您更新的问题，您可以使用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

Answer 2

您可以使用此代码：

<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