html - CSS & HTML : Styling the selected option (as placeholder + don't show in the dropdown)

Question

编辑:

我不知道为什么我得到了 2 个反对票，因为仍然没有人解决这个问题。

问题:

我无法设置所选选项的颜色(具有占位符功能)。

我试过了 this和其他一些类似的解决方案，但找不到基于 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>