Как предотвратить изменение цвета в элементе параметра и выбранном элементе в html при проверке и потерянном фокусе?

Question

У меня есть стилизованный элемент SELECT. Когда я нажимаю кнопку и каждый элемент работает нормально. Но если изменить фокус, элемент checked изменит цвет.

Вот код:

<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». Цвет отмеченной опции изменится на черный.

Я хочу быть белым.

Answer 1

Попробуйте использовать псевдо класс: активный не проверено

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

Может быть также набор браузера, вы можете сделать Нормализация и добавить

a:active{your code}