如何在选择标记中设置选定选项的颜色

我试图在选择标记中设置大小为5的选定选项的颜色，以便充当列表框。如何在选择标记中设置选定选项的颜色

当选择标签作为下拉菜单时，我可以使用它，但是当我将它作为列表框时，选中选项始终是灰色的，因为我没有将它聚焦。

下面是发生了什么的代码示例。第一个选择标签正常工作，但只要应用尺寸属性，所选选项的颜色就会变为灰色。

select { 
 
    margin: 40px; 
 
    background: yellow; 
 
    color: #000; 
 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); 
 
} 
 
option:not(:checked) { 
 
    background-color: #FFF; 
 
}

<select> 
 
    <option val="">Select Option</option> 
 
    <option val="1">Option 1</option> 
 
    <option val="2" selected>Option 2</option> 
 
    <option val="3">Option 3</option> 
 
    <option val="4">Option 4</option> 
 
</select> 
 
<br/> 
 
<select size="5" multiselect> 
 
    <option val="">Select Option</option> 
 
    <option val="1">Option 1</option> 
 
    <option val="2" selected>Option 2</option> 
 
    <option val="3">Option 3</option> 
 
    <option val="4">Option 4</option> 
 
</select>

在不同浏览器上的JS提琴检查后，它似乎是，这是获得设置浏览器的风格。

以下是来自Chrome，Firefox和Internet Explorer的图像。 Chrome和Firefox似乎都设置了自己的价值，但Internet Explorer不会。

来源

2016-07-27 polydegmon

要做到这一点，你必须设置在CSS的option的background财产。

select, 
 
select option:active, 
 
select option:checked{ 
 
     margin:40px; 
 
     background: yellow; 
 
     color:#000; 
 
     text-shadow:0 1px 0 rgba(0,0,0,0.4); 
 
    } 
 
    option:not(:checked) { 
 
     background-color: #FFF; 
 
    }

<select> 
 
     <option val="">Select Option</option> 
 
     <option val="1">Option 1</option> 
 
     <option val="2" selected>Option 2</option> 
 
     <option val="3">Option 3</option> 
 
     <option val="4">Option 4</option> 
 
    </select> 
 
    <br/> 
 
    <select size="5" multiselect> 
 
     <option val="">Select Option</option> 
 
     <option val="1">Option 1</option> 
 
     <option val="2" selected>Option 2</option> 
 
     <option val="3">Option 3</option> 
 
     <option onfocus="this.style.background='red'" val="4">Option 4</option> 
 
    </select>

来源

2016-07-27 17:44:49 EddNewGate

有没有什么办法让灰色文本出现灰色以外的颜色？ – polydegmon

@polydegmon我看到文本是黑色的，而不是灰色的。你想改变其他颜色？ – EddNewGate

我的道歉EddNewGate，我的意思是文字的背景仍然是灰色的，我希望它是黄色的，如果可能的话 – polydegmon

您可以尝试在多的情况下添加背景渐变选择如下图所示。您需要添加属性才能在跨浏览器中完成此项工作。

select[multiselect] option:checked { 
    background: -moz-linear-gradient(left, yellow 0%, yellow 100%); 
}

来源

2016-07-27 17:46:31

如何在选择标记中设置选定选项的颜色

回答

相关问题