纯CSS解决方案的样式特定< select>基于webkit的浏览器中的选项？ [英] Pure CSS solution to styling specific <select> options in webkit based browsers?

问题描述

例如，如果我有：

 < 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> 
  

有没有反对风格，特别是那些选项与类标题？显然在CSS中，如果你这样做：

  select.the-select option.header {
 background-color： ＃ff9900; 
} 
  

这应该可以工作，而在其他浏览器，但不是Chrome / Safari。这是一个webkit问题，并有此解决方法吗？

谢谢！

是一个基于OSX webkit的浏览器问题，因为它似乎在Windows上工作。我忽略了提及一个事实，我不能使用optgroups，因为我们需要能够选择这些选项。我知道optgroups是理想的解决方案，但不幸的是，在这种情况下不能这样。

解决方案

通过这种技术来定制样式一个只有CSS的选择标签。

HTML：

 < div class = > 
< 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：

 code> .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/

然后只要确保为下拉图像称为选择的图片。

Quite simply, is there any way to style specific select options in Chrome/Safari?

For example, if I had:

<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>

Is there anyway to style specifically those options with the class "header"? Obviously in CSS, if you do this:

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

This should work, and does in other browsers, but not Chrome/Safari. Is this just a webkit issue and are there any workarounds for this?

Thanks!

EDIT: This seems to be an OSX webkit based browser issue, as it seems to work on Windows. I neglected to mention the fact that I cannot use optgroups because we need to be able to select those options as well. I am aware that optgroups would be the ideal solution, but unfortunately that cannot be the case in this instance.

解决方案

I recently came across this technique to custom style a select tag with only CSS.

HTML:

<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;
 }

Here's a fiddle: http://jsfiddle.net/eshellborn/AyDms/

And then just make sure you get a picture called 'selectarrow' for the drop-down image.

这篇关于纯CSS解决方案的样式特定< select>基于webkit的浏览器中的选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！