可以选择<选项>下拉列表吗？ （截至2017年）

Question

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

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

仅限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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以制作div并让它像

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

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

我不确定悬停是否会起作用，但是你只会这样做

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