色を変更は

Question

私は、ページ上のmultiple select要素を持っている：

<select multiple="multiple"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select> 

そのオプションの色は黒です。しかし、オプションを選択すると、その色が白くなります。

CSSで選択したオプションの色を黒（または他の色）に変更するにはどうすればよいですか？

私は

• select option:active
• select option:checked
• select option:focus
• select option:hover

を使用してみましたが、彼らは、トリックを行いません。

UPD： ここでは、私は必要なもののjsfiddleです：https://jsfiddle.net/htshame/th3gesvv/4/

Answer 1

私はCSSでこのを達成する方法がわからないが、私はあなたがCSSを使用して選択オプションを選択することができることを知っています。

私の提案は選択オプションの属性を更新して、お好みの背景色を配置するCSSルール[selected]を変更するためにjQueryを使用することです。ここで

が実行されている例です。

$(document).ready(function() { 
 
$('select').change(function() { 
 
    var selectedOption = $(this).find(':selected'); 
 
    selectedOption.attr('selected','selected'); 
 
}).change(); 
 
});

select{height: 200px; width: 300px;} 
 
option {margin: 10px;} 
 

 
[selected] { 
 
    background-color: #0f0; 
 
    font-weight:bold; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<select multiple="multiple"> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
    <option>Four</option> 
 
    <option>Five</option> 
 
</select>