Can a select

Question

Simple question with seemingly no real solution for any browser other than Mozilla Firefox.

Can we, as of 2017, style the dropdown menu and <option> elements of a <select> field?

Preferably CSS only, but JavaScript solutions will do as well.

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>

Similar question: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — José Quinto Zamora, Mar 14 '17 at 14:21
No, not really. Most frameworks looking for consistency in the forms UI simply replace a `select` with a custom implementation comprising a list hosted within a div. — Alex K., Mar 14 '17 at 14:23
Please don't ask duplicate questions. Yeah, I know the questions are old, but many of the answers have been [updated this year](http://stackoverflow.com/a/13968900/215552). — Heretic Monkey, Mar 14 '17 at 14:41

score 1 · Accepted Answer · answered Mar 14 '17 at 14:38

You can do this with jquery select2. and there are lot of feature in select2 instead of simple 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>

score 0 · Answer 2 · answered Mar 14 '17 at 14:25

Could you make div and make it be like

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

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

Im not really sure if the hover would work, but then you would just do

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

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

2 Answers2

Can a select