如何更改选择标签的背景颜色？

我想改变我的下拉菜单的背景颜色，我试图去掉border-radius。如何更改选择标签的背景颜色？

这是HTML：

<select name="liste" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" id="liste" aria-required="true" aria-invalid="false"> 
<option value="">---</option> 
<option value="Brannvern og dokumentasjon">Brannvern og dokumentasjon</option> 
<option value="Brannvarslingsanlegg">Brannvarslingsanlegg</option><option value="Røykvarslere">Røykvarslere</option> 
</select>

这是我尝试过的CSS：

select#liste { 
    border: 1px solid #e0e0e0 !important; 
    background-color: #ffffff !important; 
    border-radius: 0px !important; 
    height:37px; 
    line-height:37px; 
    }

但它无法正常工作。

这里是一个的jsfiddle在那里你可以明白我的意思：https://jsfiddle.net/5g2y8eLm/

感谢您的hjelp！

来源

2016-08-02 dahlsdata-tahira

请将此内容发布到jsFiddle而不是您的直播网站。 – Dai

我没有看到任何'border-radius'。 – Elfayer

我已经添加了一个jsFiddle到我的问题。请检查一下。 –

对于我的我不喜欢的是，它的工作：

<select class="list"> 
    <option>English</option> 
    <option>Français</option> 
</select>

CSS：

.list{color:black; background-color:azure;}

来源

2016-08-02 09:26:02 Firefly

可以使用background财产CSS来改变背景颜色;

select#liste { 
 
    border: 1px solid #e0e0e0 !important; 
 
    background-color: #ffffff !important; 
 
    border-radius: 0px !important; 
 
    height: 37px; 
 
    line-height: 37px; 
 
    outline: none; 
 
}

<select id="liste"> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
</select>

来源

2016-08-02 09:29:39 niyasc

要删除border，只需设置它的outline: none，并根据给出的示例网站，您已经在下拉蓝色背景。

select#liste { 
    background-color: #fff; 
    border-radius: 0px !important; 
    height: 37px; 
    line-height: 37px; 
    outline: none; /*Add this*/ 
}

尝试下面的代码改变background color和fontcolor。

select#liste { 
 
    background-color: #111; 
 
    border-radius: 0px !important; 
 
    height:37px; 
 
    line-height:37px; 
 
    color:#fff; 
 
    outline:none; 
 
    }

<select name="liste" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" id="liste" aria-required="true" aria-invalid="false"> 
 
<option value="">---</option> 
 
<option value="Brannvern og dokumentasjon">Brannvern og dokumentasjon</option> 
 
<option value="Brannvarslingsanlegg">Brannvarslingsanlegg</option><option value="Røykvarslere">Røykvarslere</option> 
 
</select>

来源

2016-08-02 09:30:04 frnt

结帐这个Setting background color of a selected HTML option element

它正在为浏览器和Mozilla。

他是用：

<select multiple="" class="form-control"> 
     <option>Option One</option> 
     <option>Option Two</option> 
     <option>Option Three</option> 
     <option>Option Four</option> 
     <option>Option Five</option> 
</select> 

select option:checked { 
color: white; 
background: #f26532 repeat url(data:image/png;base64,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);}

对于后台数据图像使用此data url maker转换彩色图像文件（对我来说这是一个橙色的图像）数据的URL，然后将代码粘贴在url （）

这工作!!!。

来源

2017-06-13 11:31:01 jayjay

如何更改选择标签的背景颜色？

回答

相关问题