css - 選択オプションで選択の色を変更するには?

Question

選択オプションで選択の色を変更しようとしています。私はこれをやろうとしていました:

option::selection {background: #ccc;}
option::-moz-selection {background: #ccc;}
option::-webkit-selection {background: #ccc; color:#fff;}

しかし、うまくいきません。これは単純なテキストに対してのみ機能し、オプションに対しては機能しません。選択範囲の色を変更する方法はありますか? 選択したオプションの背景を変更する必要はありません。選択の色を変更する必要があります。

Answer 1

これがあなたの期待通りであることを願っています。

function ChangedSelection()
{
var x = document.getElementById("mySelect").selectedIndex;
var color =document.getElementsByTagName("option")[x].value;
var y = document.getElementById("mySelect");
y.style.color=color;
}

<select id="mySelect" onchange="ChangedSelection()" style="Color:red;">
    <option value="red" selected="selected">Red</option>
    <option value="blue">Blue</option>
    <option value="Green">Green</option>
    <option value="Yellow">Yellow</option>
</select>

Answer 2

これを試して

http://jsfiddle.net/zNTqm/287/

ジャバスクリプト

$('.mySelect').change(function () {
    $(this).find('option').css('background-color', 'transparent');
    $(this).find('option:selected').css('background-color', '#cccccc');
}).trigger('change');

HTML

<select class="mySelect">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>