可以设置 select <option> 下拉菜单的样式了吗？（截至 2017 年）

Question

一个简单的问题，对于除 Mozilla Firefox 之外的任何浏览器似乎都没有真正的解决方案。

从 2017 年开始，我们可以设置下拉菜单和 <select> 字段的 <option> 元素的样式吗？

最好只 CSS，但 JavaScript 解决方案也可以。

select {
  outline: 0;
}

option {
  outline: 0;
  padding: 4px 8px;
}

option.yes {
  border: 1px solid green;
}

option.yes_but_no {
  border: 1px solid orange;
}

option.no {
  border: 1px solid red;
}

<select>
  <option>Choose an answer</option>
  <option class="yes">Yes, we finally can!</option>
  <option class="yes_but_no">Yes, but only in Firefox</option>
  <option class="no">No, we still can't...</option>
</select>

Answer 1

你能不能把 div 改成

    #option1 { color: blue; background-color: red; }

    hover:#option1 { background-color: white; }

我不太确定悬停是否有效，但你可以这样做

    <option class="no" div="option1";>No, we still can't...</option>

Answer 2

您可以使用 jquery select2 执行此操作。 select2 中有很多功能，而不是简单的 select

$("select").select2({
  templateResult: function (data, container) {
    if (data.element) {
      $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
  }
});

.yellow { background-color: yellow; }
.blue { background-color: blue }
.green { background-color: green; }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>

<select class="select2">
  <option value="AL" class="yellow">Alabama</option>
  <option value="AK" class="blue">Alaska</option>
  <option value="AZ" class="green">Arizona</option>
</select>

可以设置 select <option> 下拉菜单的样式了吗？（截至 2017 年）

Can a select <option> dropdown be styled yet? (as of 2017)

javascript

html

css

html-select

可以设置 select <option> 下拉菜单的样式了吗？ （截至 2017 年）

Can a select <option> dropdown be styled yet? (as of 2017)

javascript

html

css

html-select

可以设置 select <option> 下拉菜单的样式了吗？（截至 2017 年）