Fully custom select box, simple css only
Everyone knows that styling select boxes sucks. Here is some help.
You basically strip down the original select as much as possible, and proceed styling it with a div wrapper. Works in IE8+
This version is simple looking, you can style it however you want.
HTML
<div class="select-style">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>CSS
.select-style {
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background: #fafafa url("img/icon-select.png") no-repeat 90% 50%;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
}
.select-style select:focus {
outline: none;
}Written by Ivor Reić
Related protips
32 Responses
Pretty much the method I use. Much preferred over a JS solution!
Great tip, thank you!
I ended up creating a Codepen out of this, in order to keep it for later. All credit goes to you. Check it out here: http://codepen.io/gnclmorais/details/cHkqt
Nice, Ivor!...
Simple and straightforward!
Looks bad in Chrome on Mac, I see a box and then the standard Mac UI select box inside of it with padding to the right
Sorry for posting messed up code, fixed now.
Tested in chrome, ff, safari and ie 8,9,10. Everything seems fine now
"Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly": http://harvesthq.github.io/chosen/
To save yourself from downloading an extra image you could base64 encode it:
url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==")
i have test on ie and while we select any option it hide arrow.this issue only in ie. can any one help me for this.
Fail in Chrome on Mac ;)
how can you add an outline effect to the div? also, default arrow still displays on ff for mac. any suggestions?
Doesnt work on Chrome/MacOS
Works for me on Chrome/MacOS just fine. Thanks for the easy CSS snippet!
Nice! I've forked the codepen to use a CSS triangle instead of an image: http://codepen.io/sqrbrkt/details/Asbxf/
Great tip! Thanks a lot
Thanks!
Forked to add a small fix for FF's ugly outline on focus (was persisting, in FF only, despite "outline:none" in your version)
Fix is on line #29, in the css
http://codepen.io/aubricus/pen/zCiyJ
Thanks for the post.
hello it's nice selectbox design
i have some another design
http://myphpinformation.blogspot.in/2014/12/select-box-design.html
please check if you like new design.
This is pretty great! I have one small problem – if text is too long it overrides the dropdown arrow, is there any solution for that?
thanks Ivor! Whenever there is a custom select box needed this is the most simple and elegant solution there is!
Also referring to this code snippet in many projects I'v worked on and I'm still amazed by simplicity of it =)
Cool! It works in latest IE too!
Works nicely, thanks to you and aubricus.
Why not use Slivio Moreto's http://silviomoreto.github.io/bootstrap-select/
Why width:130% ?
More responsible and without defined width.
Check it out here (Sass): http://codepen.io/fil_dev/pen/oZNXzw
for hide arrow in IE use
select::-ms-expand {
display: none;
}
Tested so far in Chrome and Edge, both under Windows 10. Works fine. Added
.select-style select option {
}
to the css, to change the font and the color of the options.
background-color:red; or background-color:#FF0000; works fine too, but cannot use background-color:transparent nor background-color:rgba(0,0,0,0); - then the background color turns to default (whiteish, I guess)
Any suggestions?
awesome thanks for share tips
A standing desk is basically a desk that allows you to stand comfortably while you work. Many modern versions are adjustable, so you can change the height of the desk and alternate between sitting and standing positions. These are called height-adjustable desks or sit-stand desks. Although research is still in its early stages, the use of standing desks does offer impressive health benefits and can also increase productivity. fezibo is a great sit stand desk that is flexible and can be raised and lowered to meet different height adjustments.
Nice, Simple and Straight forward!
Just checked it on the up to date Chrome and Edge. Works like a charm, both on desktop and mobile so it looks like a solid piece of code. Thank you.
wooo that's a really cool tip, thanks! i'm new to this forum, is there a way to upvote comments and tips?
This custom select box solution seems really practical, especially for those who struggle with the often frustrating task of styling select boxes in CSS. Using a div wrapper to simplify the process and ensure compatibility with IE8+ is a smart approach. The added flexibility to style it as desired is a great bonus. Plus, the CSS code provided is straightforward and easy to understand, which makes it convenient for implementation.
Have a fresh tip? Share with Coderwall community!
