如何在检查和丢失焦点时，如何防止HTML中选项项中的颜色变化？答案

【问题标题】：How to prevent color change in a option item from and selected element in html when is checked and lost focus?如何在检查和丢失焦点时，如何防止HTML中选项项中的颜色变化？
【发布时间】：2016-10-06 15:11:16
【问题描述】：

我有一个风格化的 SELECT 元素。当我单击并元素时，一切正常。但是如果改变焦点，被选中的元素会改变颜色。

代码如下：

<style>
  .extracts-view__select-menu {
  font-family: 'OpenSansRegular', Open Sans, Arial, sans-serif;
  font-size: 16px;
  width: 100%;
  margin-right: -20px;
  border: 0;
  color: #F1F1F1;
  font-weight: 500;
  line-height: 26.4px;
  overflow: hidden;
  list-style-type: none;
  }
  .extracts-view__select-menu:focus {
  border: 0;
  outline: none; 
  }
  .extracts-view__menu-item {
  padding: 8px 16px;
  background: #FFFFFF;
  color: #18A592;
  box-shadow: inset 368px 38px #FFFFFF; 
  }
  .extracts-view__menu-item:hover {
  outline: 1px solid #18A592; 
  }
  .extracts-view__menu-item:checked {
  color: #FFFFFF;
  box-shadow: inset 368px 38px #18A592;
  font-weight: bolder; 
  }
</style>

 <p>Hello World !</p>

 <select 
     size="5" 
     class="extracts-view__select-menu">

  <option class="extracts-view__menu-item">Transferencia banco de españa</option>
  <option class="extracts-view__menu-item">Extracto integrado</option>
  <option class="extracts-view__menu-item">Embargos</option>
  <option class="extracts-view__menu-item">Domiciliaciones</option>

这是相同的审核代码：http://jsbin.com/yeziwi/edit?html,output

重现错误的步骤是：

单击一个选项，然后单击“Hello World”。选中选项的颜色变为黑色。

我想变白。

【问题讨论】：

标签： css select option checked

【解决方案1】：

尝试使用伪类：active not checked

.extracts-view__menu-item:active {
  color: #FFFFFF;
  box-shadow: inset 368px 38px #18A592;
  font-weight: bolder; 
  }

也可以是浏览器的一套，可以做个规范化添加

a:active{your code}

【讨论】：

我想给你的投票 +1，但我的低评级仍然不允许我。发生的事情很奇怪，因为谷歌浏览器中的不同用户的行为彼此不同。反正。非常感谢。
谢谢！我知道我也有这种形式的一些限制！很乐意帮助你。是的，通常取决于浏览器，而不是来自用户，但可能是他们在他们的 chrome 上设置了一些设置，或者有旧版本。或者也许一些cookies有机会预设。我不知道这只是一个假设！