Question

我正在尝试更改下拉列表的背景颜色，我正在尝试删除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/

感谢您的帮助！

Answer 1

对于我来说，我确实喜欢这样，并且有效：

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

CSS：

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

Answer 2

您可以在css中使用background属性来更改背景颜色;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

要删除border，只需将其设置为outline: none，根据给定的示例网站，您在下拉菜单中已经有了蓝色背景。

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

尝试使用以下代码更改background color的{{1}}和color。

font

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

Answer 4

结帐Setting background color of a selected HTML option element

它适用于chrome和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将带有颜色的图像文件（对我来说是橙色图像）转换为数据网址，然后将代码粘贴到网址（）

中

这个工作!!!。

如何更改select-tag的背景颜色？

4 个答案: