如何设计选择标签的选项元素？

我试图在Google Chrome的select下拉菜单中设置option的样式。它适用于除IE9和Chrome之外的所有浏览器。如何设计选择标签的选项元素？

option.red { 
 
    background-color: #cc0000; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    color: white; 
 
}

<select name="color"> 
 
    <option class="red" value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="green">Green</option> 
 
</select>

不使用JavaScript的，是有没有办法设置样式在谷歌浏览器的选项？一旦选定，背景颜色不会显示。

来源

2011-05-04 Mike

Safari，IE 6-8，FF等 – Mike 2011-05-04 17:07:44

我只是希望选项代码在Chrome中工作。 – Mike 2011-05-04 17:08:27

适用于我的铬合金，只是在选择时丢失红色背景。 – Andrea 2011-05-04 17:08:37

不幸的是，WebKit浏览器不支持<option>标签的样式，但color和background-color除外。

使用最广泛的跨浏览器解决方案是使用<ul>/<li>并使用CSS对它们进行样式设置。像Bootstrap这样的框架做得很好。

来源

2013-06-20 00:25:37

+12

这不完全正确。它实际上是取决于操作系统的下拉式支持的一组样式。有趣的是，样式选择似乎在Windows 7/8中可用，我可以肯定地说它不适用于OS X（10.8）。 – vpiTriumph 2013-12-18 21:32:12

它也不适用于Linux的风格。 =/ – 2014-01-02 14:05:24

现代浏览器DO支持样式化“OPTION”标签 - 为样式添加样式属性 – Jimmery 2017-01-24 14:13:34

这是一个选择（从浏览器开发人员或W3C，我找不到任何有关样式选择选项的W3C规范），不允许样式选择选项。

我怀疑这是为了保持与本地选择列表的一致性。
（想想移动设备）。

3解决方案来我的脑海：

使用Select2实际上你选择转换成ul秒（这让很多的东西）
分裂您select s转换多以组值
斯普利特into optgroup

来源

2013-09-23 09:23:37

您是对的。明确的选择是在CSS2时代做出的，因为在那个时候，浏览器使用平台UI小部件来呈现浏览器UI小部件，平台UI小部件通常支持比CSS想要的更受限制的样式。今天，FF和IE已经开始自我渲染所有的控制;手机浏览器除了手机FF都有这个问题; Chrome正在到达那里;桌面Safari和Opera正在落后。 – 2015-01-10 16:00:19

我同意Pierre和@John。由于JQUI已经可用，我用jQuery UI的selectMenu替换了大型客户站点上的所有选择框。 – BenRacicot 2015-01-14 20:50:20

我真的发现了一些最近似乎适用于stylin的东西g使用纯CSS的Chrome，Firefox和IE中的个人3210元素。

也许，请尝试以下操作：

HTML：

<select> 
    <option value="blank">Blank</option> 
    <option class="white" value="white">White</option> 
    <option class="red" value="red">Red</option> 
    <option class="blue" value="blue">Blue</option> 
</select>

CSS：

select { 
    background-color:#000; 
    color: #FFF; 
} 

select * { 
    background-color:#000; 
    color:#FFF; 
} 

select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */ 
    background-color:#F00; 
    color:#FFF; 
} 

select *.white { 
    background-color:#FFF; 
    color:#000; 
} 

select *.blue { 
    background-color:#06F; 
    color:#FFF; 
}

奇怪做什么投掷谨慎的风。但它似乎并不支持:active :hover :focus :link :visited :after :before。

实施例上的jsfiddle：http://jsfiddle.net/Xd7TJ/2/

来源

2014-03-25 23:25:32 LeoV117

+16

这在使用Chrome的Mac中不起作用。在Mac OSX 10.9.2版本上测试。 – 2014-04-13 07:54:42

我正在运行Windows 7，这似乎工作正常。我实际上并不喜欢这种方法，因为它似乎只支持'background-color'和'color' CSS属性。 – LeoV117 2014-04-13 15:28:16

对于windows 7中的chrome，它不会为选择框着色，只有下拉框中的选项。所以如果你选择了彩色选项，一旦选择了颜色，它就会有不同的颜色。 – Myforwik 2014-08-27 06:27:54

铬的未来版本（49+）现在将支持造型<option>元件与font-weight。来源：https://code.google.com/p/chromium/issues/detail?id=44917#c22

新建选择弹出式菜单：应该应用字体重量样式。

此CL删除themeChromiumSkia.css。其中|!important|阻止到申请font-weight。现在html.css有|font-weight:normal|，并且 |!important|应该是不必要的。

有一个Chrome样式表themeChromiumSkia.css，它一直使用font-weight: normal !important;。它应该在稳定的Chrome版本49.0版本中。

来源

2015-11-29 23:39:13 TylerH

这就是为什么我每隔几天就要为grep我的代码库中的字符像'！important'这样的一个要点。 – BoltClock 2015-11-30 03:29:10

我使用jQuery ......虽然我们不能风格特别的选择，我们可以风格的选择本身就是一种解决办法 - 和使用JavaScript来更改类根据所选内容选择的。它适用于简单的情况。

$('select.potentially_red').on('change', function() { 
 
if ($(this).val()=='red') { 
 
    $(this).addClass('option_red'); 
 
} else { 
 
    $(this).removeClass('option_red'); 
 
} 
 
}); 
 
$('select.potentially_red').each(function() { 
 
if ($(this).val()=='red') { 
 
    $(this).addClass('option_red'); 
 
} else { 
 
    $(this).removeClass('option_red'); 
 
} 
 
});

.option_red { 
 
    background-color: #cc0000; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    color: white; 
 
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<!-- The js will affect all selects which have the class 'potentially_red' --> 
 
<select name="color" class="potentially_red"> 
 
    <option value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="green">Green</option> 
 
</select>

注意，JS分为两个部分，在页面上为应对改变正确初始化应有尽有，.on('change', ...部分each部分。我无法将js转换成干燥的功能，它因为某种原因而中断它

来源

2017-01-10 18:49:58 xxjjnn

如何设计选择标签的选项元素？

回答

相关问题