如何更改select框选项的背景颜色？
我有一个select框，我试图改变选项的背景颜色，当select框被点击并显示所有的选项。
看小提琴
HTML
<select> <option val="">Please choose</option> <option val="1">Option 1</option> <option val="2">Option 2</option> <option val="3">Option 3</option> <option val="4">Option 4</option> </select> CSS
select{ margin:40px; background: rgba(0,0,0,0.3); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.4); }
您需要在option标记上放置background-color ，而不是select标记…
select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
如果您想要设置每个option标签的样式，请使用css attributeselect器：
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[value="1"] { /* value not val */ background: rgba(100, 100, 100, 0.3); } select option[value="2"] { /* value not val */ background: rgba(200, 200, 200, 0.3); } /* ... */
我不知道你是否考虑过，但如果你的应用程序是基于着色各种不同的项目组，你应该使用<optgroup>标签加上一个类来进一步引用。 例如：
<select> <optgroup label="Numbers" class="green"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </optgroup> <optgroup label="Letters" class="blue"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </optgroup> </select>
然后在你的文档头写这样的CSS：
<style type="text/css"> .green option{ background-color:#0F0; } .blue option{ background-color:#00F; } </style>
是的，你可以使用这个反oppisite的方式来设置，
option:not(:checked) { }
检查这个演示jsFiddle
HTML
<select> <option val="">Please choose</option> <option val="1">Option 1</option> <option val="2">Option 2</option> <option val="3">Option 3</option> <option val="4">Option 4</option> </select>
CSS
select{ margin:40px; background: rgba(0,0,0,0.3); color:#FFF; text-shadow:0 1px 0 rgba(0,0,0,0.4); } option:not(:checked) { background-color: white; color:#000; }
类似的一些答案，但没有真正说明，是添加一个类的实际选项标签，并使用css类…这是目前在IE上工作没有问题（见上面的ss）。
<select id="reviewAction"> <option class="greenColor">Accept and Advance Status</option> <option class="redColor">Return for Modifications</option> </select>
CSS：
.greenColor{ background-color: #33CC33; } .redColor{ background-color: #E60000; }
另一个select是使用Javascript：
if (document.getElementById('selectID').value == '1') { document.getElementById('optionID').style.color = '#000';
（不如CSS属性select器干净，但更强大）
我的select不会使背景变色，直到我添加！对于风格来说很重要。
input, select, select option{background-color:#FFE !important}
如果你真的想要风格的内部，考虑切换到一个基于JavaScript / CSS的下拉菜单，如http://getbootstrap.com/2.3.2/components.html#dropdowns或https://silviomoreto.github.io/ bootstrap-select / examples / 。 这是因为像IE 这样的浏览器不允许元素内的选项样式 。 Chrome / OSX也有这个问题 – 你不能风格的select。
但是，这个方法有一个警告。 这些types的菜单在移动平台上的工作方式非常不同，因为不使用本地元素。 他们也可以在桌面上有恼人的怪癖。 我的build议是1）不要写你自己的，2）find一个经过了很好testing的图书馆。
$htmlIngressCss='<style>'; $multiOptions = array("" => "All"); $resIn = $this->commonDB->getIngressTrunk(); while ($row = $resIn->fetch()) { if($row['IsActive']==0){ $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}'; } $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName']; } $htmlIngressCss.='</style>';
在你的HTML部分添加$htmlIngressCss 🙂
只是在一些人看到它的一些贡献。
http://jsfiddle.net/luiscastillo/sFx7f/
$(function(){ $('#tipo').focusin(function(){ $(this).css('color','red') }); $('#tipo').focusout(function(){ if(this.value === '') $(this).css('color','#ccc'); else $(this).css('color','red'); }); });
