CSS＆amp; HTML：为所选选项设置样式（作为占位符+不在下拉列表中显示）

Question

编辑：

我不知道为什么我有2个downvotes，因为仍然没有人解决这个问题。

问题：

我无法设置所选选项的颜色（将功能作为占位符）。

我尝试了this和其他一些silimar解决方案，但找不到基于HTML / CSS的解决方案。

option {
  color:#999;
}

/* NOT working */
option:selected {
  color:blue;
}

<select class="form-control" id="frmMaand" name="offer_request[month]">
    <option value="" class="disabled-option" hidden selected>
        <span style="color:#999 !important; background:#333 !important;">Select an option</span>
    </option>
    <option value="value1">Option 1</option>
    <option value="value2">Option 2</option>
    <option value="value3">Option 3</option>
    <option value="value4">Option 4</option>
</select>

注意：

• 我正在寻找非JavaScript / jQuery解决方案。

• 我希望附加到选项标签的属性能够保持最佳的用户体验：

  hidden selected
  

编辑：

我想使用第一个选项，例如占位符。我不希望占位符在下拉列表中可见，颜色需要比其他选项元素更亮。

Answer 1

试试此代码jsfiddle

    option {
  color:#999;
}

    /* NOT working */
    option:selected {
      color:blue;
    }

    .styled-offer select.offer-select {
        color:blue;
      }
      .styled-offer select.offer-select option {
        color: #999;
      }

  

 <div class="styled-offer">

<select class="form-control offer-select" id="frmMaand" name="type">
    <option value="1" class="disabled-option   selected" hidden selected  >
        <span>Select an option</span>
    </option>
    <option value="value1" >Option 1</option>
    <option value="value2">Option 2</option>
    <option value="value3">Option 3</option>
    <option value="value4">Option 4</option>
</select>

</div>

Answer 2

option控件的select元素由于呈现为HTML而无法设置样式，但背景颜色和颜色除外  属性。

Answer 3

您可以更改选择和选项的样式，如下所示： -

如果要为每个选项标签设置样式..请使用css属性选择器：

select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

select option[val="1"]{
    background: rgba(100,100,100,0.3);
}

select option[val="2"]{
    background: rgba(200,200,200,0.3);
}

它可能对你有帮助。

Answer 4

您不需要:selected选择器： 就这样做：

#frmMaand option {
  color:#999;
}