Is there a CSS-only way to style a <select> dropdown?
I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?
This code needs to be compatible with all major browsers:
I know I can make it with JavaScript: Example.
And I'm not talking about simple styling. I want to know, what the best we can do with CSS only.
I found similar questions on Stack Overflow.
And this one on Doctype.com.
This question is related to
html
css
combobox
cross-browser
skinning
Here's a solution based on my favorite ideas from this discussion. This allows styling a <select> element directly without any additional markup.
It works Internet Explorer 10 (and later) with a safe fallback for Internet Explorer 8/9. One caveat for these browsers is that the background image must be positioned and be small enough to hide behind the native expand control.
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
body {
padding: 4em 40%;
text-align: center;
}
select {
$bg-color: lightcyan;
$text-color: black;
appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
background: {
color: $bg-color;
image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
position: right;
repeat: no-repeat;
}
border: {
color: mix($bg-color, black, 80%);
radius: .2em;
style: solid;
width: 1px;
right-color: mix($bg-color, black, 60%);
bottom-color: mix($bg-color, black, 60%);
}
color: $text-color;
padding: .33em .5em;
width: 100%;
}
// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
display: none;
}
A very nice example that uses :after and :before to do the trick is in Styling Select Box with CSS3 | CSSDeck
<select> tags can be styled through CSS just like any other HTML element on an HTML page rendered in a browser. Below is an (overly simple) example that will position a select element on the page and render the text of the options in blue.
Example HTML file (selectExample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Example CSS file (selectExample.css):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
Use the clip property to crop the borders and the arrow of the select element, then add your own replacement styles to the wrapper:
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<style>_x000D_
select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }_x000D_
body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }_x000D_
</style>_x000D_
</head>_x000D_
<span>_x000D_
<select>_x000D_
<option value="">Alpha</option>_x000D_
<option value="">Beta</option>_x000D_
<option value="">Charlie</option>_x000D_
</select>_x000D_
</span>_x000D_
</html>Use a second select with zero opacity to make the button clickable:
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<style>_x000D_
#real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }_x000D_
#fake { position: absolute; opacity: 0; }_x000D_
_x000D_
body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }_x000D_
</style>_x000D_
</head>_x000D_
<span>_x000D_
<select id="real">_x000D_
<option value="">Alpha</option>_x000D_
<option value="">Beta</option>_x000D_
<option value="">Charlie</option>_x000D_
</select>_x000D_
<select id="fake">_x000D_
<option value="">Alpha</option>_x000D_
<option value="">Beta</option>_x000D_
<option value="">Charlie</option>_x000D_
</select>_x000D_
</span>_x000D_
</html>Coordinates differ between Webkit and other browsers, but a @media query can cover that.
References
As of Internet Explorer 10, you can use the ::-ms-expand pseudo element selector to style, and hide, the drop down arrow element.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
The remaining styling should be similar to other browsers.
Here is a basic fork of Danield's jsfiddle that applies support for IE10
Yes. You may style any HTML element by its tag name, like this:
select {
font-weight: bold;
}
Of course, you can also use a CSS class to style it, like any other element:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
In modern browsers it's relatively painless to style the <select> in CSS. With appearance: none the only tricky part is replacing the arrow (if that's what you want). Here's a solution that uses an inline data: URI with plain-text SVG:
select {_x000D_
-moz-appearance: none;_x000D_
-webkit-appearance: none;_x000D_
appearance: none;_x000D_
_x000D_
background-repeat: no-repeat;_x000D_
background-size: 0.5em auto;_x000D_
background-position: right 0.25em center;_x000D_
padding-right: 1em;_x000D_
_x000D_
background-image: url("data:image/svg+xml;charset=utf-8, \_x000D_
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \_x000D_
<polygon points='0,0 60,0 30,40' style='fill:black;'/> \_x000D_
</svg>");_x000D_
}<select>_x000D_
<option>Option 1</option>_x000D_
<option>Option 2</option>_x000D_
</select>_x000D_
_x000D_
<select style="font-size: 2rem;">_x000D_
<option>Option 1</option>_x000D_
<option>Option 2</option>_x000D_
</select>The rest of the styling (borders, padding, colors, etc.) is fairly straightforward.
This works in all the browsers I just tried (Firefox 50, Chrome 55, Edge 38, and Safari 10). One note about Firefox is that if you want to use the # character in the data URI (e.g. fill: #000) you need to escape it (fill: %23000).
The blog post How to CSS form drop down style no JavaScript works for me, but it fails in Opera though:
select {_x000D_
border: 0 none;_x000D_
color: #FFFFFF;_x000D_
background: transparent;_x000D_
font-size: 20px;_x000D_
font-weight: bold;_x000D_
padding: 2px 10px;_x000D_
width: 378px;_x000D_
*width: 350px;_x000D_
*background: #58B14C;_x000D_
}_x000D_
_x000D_
#mainselection {_x000D_
overflow: hidden;_x000D_
width: 350px;_x000D_
-moz-border-radius: 9px 9px 9px 9px;_x000D_
-webkit-border-radius: 9px 9px 9px 9px;_x000D_
border-radius: 9px 9px 9px 9px;_x000D_
box-shadow: 1px 1px 11px #330033;_x000D_
background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;_x000D_
}<div id="mainselection">_x000D_
<select>_x000D_
<option>Select an Option</option>_x000D_
<option>Option 1</option>_x000D_
<option>Option 2</option>_x000D_
</select>_x000D_
</div>Here is a version that works in all modern browsers. The key is using appearance:none which removes the default formatting. Since all of the formatting is gone, you have to add back in the arrow that visually differentiates the select from the input.
Working example: https://jsfiddle.net/gs2q1c7p/
select:not([multiple]) {_x000D_
-webkit-appearance: none;_x000D_
-moz-appearance: none;_x000D_
background-position: right 50%;_x000D_
background-repeat: no-repeat;_x000D_
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);_x000D_
padding: .5em;_x000D_
padding-right: 1.5em_x000D_
}_x000D_
_x000D_
#mySelect {_x000D_
border-radius: 0_x000D_
}<select id="mySelect">_x000D_
<option>Option 1</option>_x000D_
<option>Option 2</option>_x000D_
</select>label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: black;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: lightblue;
}
This uses a background color for select elements and I removed the image..
I got to your case using Bootstrap. This is the simplest solution that works:
select.form-control {_x000D_
-moz-appearance: none;_x000D_
-webkit-appearance: none;_x000D_
appearance: none;_x000D_
background-position: right center;_x000D_
background-repeat: no-repeat;_x000D_
background-size: 1ex;_x000D_
background-origin: content-box;_x000D_
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");_x000D_
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<section class="container">_x000D_
<form class="form-horizontal">_x000D_
<select class="form-control">_x000D_
<option>One</option>_x000D_
<option>Two</option>_x000D_
</select>_x000D_
</form>_x000D_
</section>Note: the base64 stuff is fa-chevron-down in SVG.
The third method in Danield's answer can be improved to work with hover-effects and other mouse events. Just make sure that the "button"-element comes right after the select element in the markup. Then target it using the + CSS selector:
<select class="select-input">...</select>
<div class="select-button"></div>
.select-input:hover+.select-button {
<Hover styles here>
}
This will, however, show the hover effect when hovering anywhere over the select-element, not just over the "button".
I'm using this method in combination with Angular (since my project happens to be an Angular application anyway), to cover the whole select-element, and let Angular display the text of the selected option in the "button"-element. In this case it makes perfect sense that the hover-effect applies when hovering anywhere over the select.
It doesn't work without JavaScript though, so if you want to do this, and your site has to work without JavaScript, you should make sure that your script adds the elements and classes necessary for the enhancement. That way, a browser without JavaScript will simply get a normal, unstyled, select, instead of a styled badge that doesn't update correctly.
Edit this element is not recommended, but if you want to try it's like any other HTML element.
Edit example:
/* Edit select */
select {
/* CSS style here */
}
/* Edit option */
option {
/* CSS style here */
}
/* Edit selected option */
/* element attr attr value */
option[selected="selected"] {
/* CSS style here */
}
<select>
<option >Something #1</option>
<option selected="selected">Something #2</option>
<option >Something #3</option>
</select>
Check this fiddle, and forgive me the overstyling: https://jsfiddle.net/dkellner/7ac9us70/
The trick behind: as soon as the <select> tag gets a property called "size", it will behave as a fixed-height list, and, suddenly, for some reason, allows you to style the hell out of it. Now strictly speaking, the fixed list is a side effect - but it just helps us more because we use it for the "dropped-down look".
A minimal example:
<style>
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick="$(this).closest('div').find('select').slideToggle(110)"><br>
<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
<optgroup label="Fantasy"></optgroup>
<option value="1"> Gandalf </option>
<option value="2"> Harry Potter </option>
<option value="3"> Jon Snow </option>
<!-- ... and so on -->
</select>
</span>
</div>
(to keep it simple I did it with jQuery - but you can do the same without it)
This solution gives you more than just a select: the value is also manually editable. Use the readonly property if you prefer the default select-restricted way.
To maximize styling possibilities, <optgroup> tags are not around their children, they're moved before them. It's intentional, it's visually clearer, and they're happy to work like this, don't worry.
Javascripts: yes I know the OP said "no Javascript" but I understood it as please don't bother with plugins, which is fine. You don't need any libraries for this one. Not even jQuery, as I said, it's only for the clarity of the example.
The largest inconsistency I've noticed when styling select dropdowns is Safari and Google Chrome rendering (Firefox is fully customizable through CSS). After some searching through obscure depths of the Internet I came across the following, which nearly completely resolves my qualms with WebKit:
Safari and Google Chrome fix:
select {
-webkit-appearance: none;
}
This does, however, remove the dropdown arrow. You can add a dropdown arrow using a nearby div with a background, negative margin or absolutely positioned over the select dropdown.
*More information and other variables are available in CSS property: -webkit-appearance.
Tested in Internet Explorer (10 and 11), Edge, Firefox, and Chrome
select::-ms-expand {
display: none;
}
select {
display: inline-block;
box-sizing: border-box;
padding: 0.5em 2em 0.5em 0.5em;
border: 1px solid #eee;
font: inherit;
line-height: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 15px top 1em, right 10px top 1em;
background-size: 5px 5px, 5px 5px;
}<select name="">
<option value="">Lorem</option>
<option value="">Lorem Ipsum</option>
</select>
<select name="" disabled>
<option value="">Disabled</option>
</select>
<select name="" style="color:red;">
<option value="">Color!</option>
<option value="">Lorem Ipsum</option>
</select>You can also add a hover style to the dropdown.
select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}_x000D_
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}<html>_x000D_
<head>_x000D_
</head>_x000D_
<body>_x000D_
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>_x000D_
<option value="Option 1">Option 1</option>_x000D_
<option value="Option 2">Option 2</option>_x000D_
<option value="Option 3">Option 3</option>_x000D_
</select>_x000D_
</body>_x000D_
</html>select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}
The select element and its dropdown feature are difficult to style.
style attributes for select element by Chris Heilmann confirms what Ryan Dohery said in a comment to the first answer:
"The select element is part of the operating system, not the browser chrome. Therefore, it is very unreliable to style, and it does not necessarily make sense to try anyway."
A CSS and HTML only solution
It seems compatible with Chrome, Firefox, and Internet Explorer 11. But please leave your feedback regarding other web browsers.
As suggested by Danield's answer, I wrap my select in a div (even two divs for x-browser compatibility) to get the expected behavior.
See http://jsfiddle.net/bjap2/
HTML:
<div class="sort-options-wrapper">
<div class="sort-options-wrapper-2">
<select class="sort-options">
<option value="choiceOne">choiceOne</option>
<option value="choiceOne">choiceThree</option>
<option value="choiceOne">choiceFour</option>
<option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
</select>
</div>
<div class="search-select-arrow-down"></div>
</div>
Notice the two div wrappers.
Also notice the extra div added to place the arrow-down button wherever you like (positioned absolutely), here we put it on the left.
.sort-options-wrapper {
display: inline-block;
position: relative;
border: 1px solid #83837F;
}
/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
overflow: hidden;
}
select {
margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some
browsers have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height: 10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}
It is possible, but unfortunately mostly in WebKit-based browsers to the extent we, as developers, require. Here is the example of CSS styling gathered from Chrome options panel via built-in developer tools inspector, improved to match currently supported CSS properties in most modern browsers:
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* Fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
When you run this code on any page within a WebKit-based browser it should change the appearance of the select box, remove standard OS-arrow and add a PNG-arrow, put some spacing before and after the label, almost anything you want.
The most important part is appearance property, which changes how the element behaves.
It works perfectly in almost all WebKit-based browser, including mobile ones, though Gecko doesn't support appearance as well as WebKit, it seems.
You definitely should do it like in Styling select, optgroup and options with CSS. In many ways, background-color and color are just what you would typically need to style options, not the entire select.
I had this exact problem, except I couldn't use images and was not limited by browser support. This should be «on spec» and with luck start working everywhere eventually.
It uses layered rotated background layers to «cut out» a dropdown arrow, as pseudo-elements wouldn't work for the select element.
Edit: In this updated version I am using CSS variables and a tiny theming system.
:root {_x000D_
--radius: 2px;_x000D_
--baseFg: dimgray;_x000D_
--baseBg: white;_x000D_
--accentFg: #006fc2;_x000D_
--accentBg: #bae1ff;_x000D_
}_x000D_
_x000D_
.theme-pink {_x000D_
--radius: 2em;_x000D_
--baseFg: #c70062;_x000D_
--baseBg: #ffe3f1;_x000D_
--accentFg: #c70062;_x000D_
--accentBg: #ffaad4;_x000D_
}_x000D_
_x000D_
.theme-construction {_x000D_
--radius: 0;_x000D_
--baseFg: white;_x000D_
--baseBg: black;_x000D_
--accentFg: black;_x000D_
--accentBg: orange;_x000D_
}_x000D_
_x000D_
select {_x000D_
font: 400 12px/1.3 sans-serif;_x000D_
-webkit-appearance: none;_x000D_
appearance: none;_x000D_
color: var(--baseFg);_x000D_
border: 1px solid var(--baseFg);_x000D_
line-height: 1;_x000D_
outline: 0;_x000D_
padding: 0.65em 2.5em 0.55em 0.75em;_x000D_
border-radius: var(--radius);_x000D_
background-color: var(--baseBg);_x000D_
background-image: linear-gradient(var(--baseFg), var(--baseFg)),_x000D_
linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),_x000D_
linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),_x000D_
linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);_x000D_
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;_x000D_
background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;_x000D_
background-position: right 20px center, right bottom, right bottom, right bottom; _x000D_
}_x000D_
_x000D_
select:hover {_x000D_
background-image: linear-gradient(var(--accentFg), var(--accentFg)),_x000D_
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),_x000D_
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),_x000D_
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);_x000D_
}_x000D_
_x000D_
select:active {_x000D_
background-image: linear-gradient(var(--accentFg), var(--accentFg)),_x000D_
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),_x000D_
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),_x000D_
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);_x000D_
color: var(--accentBg);_x000D_
border-color: var(--accentFg);_x000D_
background-color: var(--accentFg);_x000D_
}<select>_x000D_
<option>So many options</option>_x000D_
<option>...</option>_x000D_
</select>_x000D_
_x000D_
<select class="theme-pink">_x000D_
<option>So many options</option>_x000D_
<option>...</option>_x000D_
</select>_x000D_
_x000D_
<select class="theme-construction">_x000D_
<option>So many options</option>_x000D_
<option>...</option>_x000D_
</select>Source: Stackoverflow.com