選択オプションで選択の色を変更しようとしています。 私はこれを行うにしようとしていた。選択オプションで選択色を変更する方法は？
option::selection {background: #ccc;}
option::-moz-selection {background: #ccc;}
option::-webkit-selection {background: #ccc; color:#fff;}
をしかし、それは動作しません。これは、オプションではなく単純なテキストに対してのみ機能します。 選択の色を変更する方法はありますか？ 選択したオプションの背景を変更する必要はありません。私は選択の色を変更する必要があります。おかげさまで
が、これはあなたが期待したものである。この
http://jsfiddle.net/zNTqm/287/
JAVASCRIPT
$('.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>
いいえ、これはオプションそのもののバックグラウンドでのみ機能します。オプションの色ではなく、選択の色を直接変更する必要があります。 – Peter
希望をしてみてください。
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>多分それはあなたのために参考になるこれを試してみてください。
select{
margin:40px;
background: yellow;
color:#000;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) {
background-color: #FFF;
}
HTML
<select>
<option val="">Select Option</option>
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
デモJsFiddle：https://jsfiddle.net/hamzanisar/yfg8vdme/
[
なぜあなたはselectで作業していますか？あなたはいくつかのスーパークールなスタイルをしたい場合は、HTMLのリストを使用して開始する必要があります。 – miksiii
[選択ボックスのオプションの背景色を変更するにはどうすればいいですか？]（http://stackoverflow.com/questions/12836227/how-to-change-select-box-option-background-color） –