Chrome 在基于webkit的浏览器中对特定选项进行样式化的纯CSS解决方案< select>？

c7rzv4ha 于 2022-12-06 发布在 Go

关注(0)|答案(3)|浏览(141)

很简单，有没有办法在Chrome/Safari中设置特定选择选项的样式？
例如，如果我有：

<select class="the-select">

<option class="header">TECHNICIANS</option>
<option>Joe Smith</option>
<option>Joe White</option>
<option class="header">PRODUCERS</option>
<option>Jane Black</option>
<option>Cindy Gray</option>

</select>

有没有办法用类“header”对这些选项进行特殊的样式设置？显然，在CSS中，如果这样做：

select.the-select option.header {
    background-color:#ff9900;
}

这应该可以工作，在其他浏览器中也可以，但Chrome/Safari不行。这只是一个Webkit问题吗？有什么变通办法吗？
谢谢你！
编辑：这似乎是一个基于OSX webkit的浏览器问题，因为它似乎在Windows上工作。我忽略了一个事实，我不能使用optgroups，因为我们需要能够选择这些选项，以及。我知道optgroups将是理想的解决方案，但不幸的是，这不是在这种情况下。

google-chrome

来源：https://stackoverflow.com/questions/18365529/pure-css-solution-to-styling-specific-select-options-in-webkit-based-browsers

3条答案

按热度按时间

yyhrrdl81#

我最近偶然发现了一种只使用CSS来定制select标记样式的技术。
于飞：

<div class="styled-select">
  <select class="the-select">
      <optgroup label="TECHNICIANS">
        <option>Joe Smith</option>
        <option>Joe White</option>
      </optgroup>
      <optgroup label="PRODUCERS">
        <option>Jane Black</option>
        <option>Cindy Gray</option>
      </optgroup>
  </select>
</div>

CSS：

.styled-select {
width: 342px;
    height: 30px;
    overflow: hidden;
    background: url("/img/selectarrow.png") no-repeat right;
    border: none;
    opacity: 0.8;
    background-color: #999999;
 }

.styled-select select {
  background: transparent;
  width: 342px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 5px;
  font-size: 16px;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  font-weight: 200;
 font-family: "lato", sans-serif;
 font-size: 18px;
 }

 .styled-select select:focus {
outline: none;
 }

这里有一把小提琴：http://jsfiddle.net/eshellborn/AyDms/
然后确保您得到一个名为“selectarrow”的下拉图像。

赞(0）回复(0）举报 2022-12-06

ljsrvy3e2#

如果您只是希望它们明确地成为标头，请使用一个用于此目的的标记：<optgroup>。这也可能有助于您套用CSS。

<select class="the-select">
  <optgroup label="TECHNICIANS">
    <option>Joe Smith</option>
    <option>Joe White</option>
  </optgroup>
  <optgroup label="PRODUCERS">
    <option>Jane Black</option>
    <option>Cindy Gray</option>
  </optgroup>
</select>

赞(0）回复(0）举报 2022-12-06

bakd9h0s3#

实际上，您可以尝试应用'-webkit-appearance：none;'以获取选项。
第一个

赞(0）回复(0）举报 2022-12-06