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 thenone
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 {
background-image:none\9;
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(https://stackoverflow.com/favicon.ico) 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;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
Styling select tags using CSS
You can't really. Check this snippet from mdn: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
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:
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();
});
})
Related Topics
How to Use HTML to Print Header and Footer on Every Printed Page of a Document
Css Opacity Only to Background Color, Not the Text on It
Opacity CSS Not Working in Ie8
Why Don't :Before and :After Pseudo Elements Work With 'Img' Elements
How to Conditionally Apply CSS Styles in Angularjs
Column Order Manipulation Using Col-Lg-Push and Col-Lg-Pull in Twitter Bootstrap 3
Rotated Elements in CSS That Affect Their Parent'S Height Correctly
Css3 Transition Animation on Load
How to Add a Color Overlay to a Background Image
Truncating Long Strings With Css: Feasible Yet
Which CSS Properties Are Inherited
How to Prevent CSS Inheritance
Prevent Body Scrolling But Allow Overlay Scrolling
Css Units - Difference Between Vh/Vw and %