How to style select option

This question already has an answer here:

How to style a <select> dropdown with CSS only without JavaScript? 24 answers

---

I don't think there is a way to do it with CSS, you would have to hide the select, duplicate it with a list, and then replicate the functionality.

This needs to be cleaned up a lot, but should get you started:

https://jsfiddle.net/94mb53mj/

$(function() {
  var options = $("select option").map(function() {
    return $("<li style='display: none' data-value='" + $(this).attr('value') + "'>" + $(this).text() + "</li>")
  }).get();
  var $ul = $("<ul></ul>");
  $ul.append(options)
  $("select").hide().after($ul)
  $("li").first().show().on("click", function() {
    $(this).siblings().toggle();
  }).siblings().on("click", function() {
    $("select").val($(this).data("value"));
    $("li").first().html($(this).html()).siblings().toggle();
  });
})

---

As far as I know, what you're looking for cannot be done with inbuilt CSS. The CSS of the select can be changed, but the CSS customization for the select option is limited to background-color and color and maybe a few more. This is because the styling for the option is handled by the browsers.

But as always, you can use a jquery plugin that emulates the select box. And then go crazy with customization.

链接地址: http://www.djcxy.com/p/41602.html

上一篇: 我如何自定义要选择的箭头？

下一篇: 如何样式选择选项