改变焦点时保持选项的背景颜色

问题描述

在这个例子中：当我选择时2并且将焦点改变为C（任何在右边的部分），2的背景颜色变成灰色。如何在未聚焦时保持红色？

HTML：

 < select class =multiselect-leftsize = 4> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< / select> 
< select class =multiselect-rightsize = 4> 
< option> A< / option> 
< option> B< / option> 
< option> C< / option> 
< / select> 
  

CSS：

 选项{
 background：＃F00; 
} 
  

谢谢，

解决方案

这可能是浏览器特有风格的结果。您可以看到，如果您在Google Chrome浏览器中使用开发人员工具（F12）：

  select：-internal-list-box option ：checked {
 background-color：-internal-inactive-list-box-selection; 
 color：-internal-inactive-list-box-selection-text; 
} 
  

即使您使用自己的值添加相同的样式，它仍然不会正确覆盖它：

  select：-internal-list-box选项：选中{
 background-color：红色重要！; 
 color：#FFF！important; 
 
 
 
 $ b $ p 
 $ b这是将您看到的样式应用于任何< select> 元素，并且它不能直接被覆盖。  
 
 
 < select> 元素在任何类型的跨浏览器意义上都非常难以风格化。如果您确实需要处理这些内容，您可能需要这将覆盖默认的< select> 作为使用< div> 或其他元素进行样式设计的外观。
 
In this example : https://jsfiddle.net/pfc1qauz/10/ when I select 2 and changing focus to C (anything on the right part), the background color of 2 has become grey. How to keep it red when it is not focus ?

HTML: 
<select class="multiselect-left" size=4>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select class="multiselect-right" size=4>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
CSS:
option{
  background: #F00;
}
Thanks,
 解决方案 
This is likely the result of a browser-specific style. As you can see if you use the Developer Tools (F12) within Google Chrome : 
select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection;
    color: -internal-inactive-list-box-selection-text;
}
Even if you were to add this same style using your own values, it still would not override it properly :
select:-internal-list-box option:checked {
    background-color: red!important;
    color: #FFF!important;
}
This is applying the style that you are seeing to the checked options within any <select> elements and it cannot really be directly overridden. 
<select> elements are notoriously difficult to style in any kind of cross-browser sense. If it's something that you really need to handle, you would likely need to use a Javascript-based solution like select that would override the default <select> as a facade that uses <div> or other elements for styling purposes.
                        
这篇关于改变焦点时保持选项的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！