当检查和失去焦点时，如何防止选项项目和html中的选定元素发生颜色变化？

Question

I have a stylized SELECT element. When I click and element every work fine. But if change the focus, the checked element change the color.

Here is the code:

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

Here is the same code for review: http://jsbin.com/yeziwi/edit?html,output

The steps for reproduce the error are:

Click on a option, then click in "Hello World". The color of the checked option change to black.

I want to be white.

Answer 1

Try to use pseudo class :active not checked

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

Could be also a set of the browser, you can make a normalize and add

a:active{your code}