我想更改 select 框的背景颜色

Question

我想更改 select 框的背景颜色。颜色是#F1C26A 对于selector的背景。我尝试为此更改颜色和背景。但是不要改变。任何的想法？感谢帮助

select.form-control:not([size]):not([multiple]) {
  height: calc(2.25rem + 2px); }

select.form-control:focus::-ms-value {
  color: #F1C26A;
  background-color: #fff; }

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="col-6">
      <select id="Pizzas" name="Pizzas" class="form-control">
        <option value="1" >Option 1</option>
        <option value="2" >Option 2</option>
      </select>
    </div>
  </body>
</html>

Answer 1

在 select 本身上设置 background-color，就像这样 select { background-color: #F1C26A; }

Answer 2

只需删除 -ms-value，因为大多数浏览器仅 edge 和 IE 不支持它。

select.form-control:not([size]):not([multiple]) {
  height: calc(2.25rem + 2px); }

select.form-control:focus {
  color: #F1C26A;
  background-color: #fff; }

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="col-6">
<select id="Pizzas" name="Pizzas" class="form-control"  >
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
</div>
</body>
</html>

Answer 3

如果您不仅要更改背景选项 select，我建议您使用 select2 select2.org.

后台绝对是浏览器，使用select2，可以简单的改变样式。当然还有更多变体变化select

我想更改 select 框的背景颜色

I want to change the background color of the select box

html

css

select

background-color