Question

我正在尝试更改选择选项中的选择颜色。我试图这样做：

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

但它不起作用。这仅适用于简单文本，不适用于选项。有没有办法改变选择的颜色？我不需要改变所选选项的背景。我需要改变选择的颜色。感谢。

Answer 1

希望这是你的期望。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试这个可能会对你有所帮助。

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>

Demo JsFiddle：https://jsfiddle.net/hamzanisar/yfg8vdme/

Answer 3

试试这个

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>

如何在选择选项中更改选择的颜色？

3 个答案: