オプション項目の色の変更を防ぐには、チェックしてフォーカスを失ったときにhtmlの要素を選択します。

Question

私は、様式化された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」をクリックします。チェックされたオプションの色が黒に変わります。

私は白くなりたいです。

Answer 1

疑似クラスを使用してみてください：アクティブ

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

をチェックしていない、ブラウザの設定することができ、あなたはノーマライズを作り、私はあなたをさせていただきたいと思い

a:active{your code}