How to Style the ≪Option≫ With Only Css

How to style the option of an html select element?

There are only a few style attributes that can be applied to an <option> element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a <select> but are actually composed of regular HTML elements that CAN be styled.

How to style the option with only CSS?

EDIT 2015 May

Disclaimer: I've taken the snippet from the answer linked below:

Important Update!

In addition to WebKit, as of Firefox 35 we'll be able to use the appearance property:

Using -moz-appearance with the none value on a combobox now remove the
dropdown button

So now in order to hide the default styling, it's as easy as adding the following rules on our select element:

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

For IE 11 support, you can use [::-ms-expand][15].

select::-ms-expand { /* for IE 11 */
display: none;

Old Answer

Unfortunately what you ask is not possible by using pure CSS. However, here is something similar that you can choose as a work around. Check the live code below.

div {   margin: 10px;  padding: 10px;   border: 2px solid purple;   width: 200px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}div > ul { display: none; }div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}div:hover > ul > li:hover { background: white;}div:hover > ul > li:hover > a { color: red; }
<div>  Select  <ul>    <li><a href="#">Item 1</a></li>    <li><a href="#">Item 2</a></li>    <li><a href="#">Item 3</a></li>  </ul></div>

How do I style a select dropdown with only CSS?

Here are three solutions:

Solution #1 - appearance: none - with Internet Explorer 10 - 11 workaround (Demo)


To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */

Browser Support:

appearance: none has very good browser support (caniuse) - except for Internet Explorer.

We can improve this technique and add support for Internet Explorer 10 and Internet Explorer 11 by adding

select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */

If Internet Explorer 9 is a concern, we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky Internet Explorer 9 selector.

To at least undo our custom arrow - leaving the default select arrow intact.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
padding: 5px\9;

All together:

select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url( 96% / 15% no-repeat #EEE;

/* CAUTION: Internet Explorer hackery ahead */

select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
<option selected>Pineapples</option>

Styling select tags using CSS

You can't really. Check this snippet from mdn:

The <select> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the appearance property to remove the default system appearance.

However, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The <select> element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

Do indeed check the advanced guide for the little you can do to style them. A good example of how bad styling is for options:

You'll notice that the options don't inherit the font set on the parent. You also can't consistently set things like spacing and colors. For example, Firefox will apply color and background-color when set on the <option> elements, Chrome won't. Neither of them will apply any kind of spacing

How to style select option?

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:

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

Related Topics

Leave a reply