Last Updated: January 03, 2024
·
565.9K
· oldboy

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+

Picture

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;
}

32 Responses
Add your response

Pretty much the method I use. Much preferred over a JS solution!

over 1 year ago ·

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

over 1 year ago ·

Nice, Ivor!...
Simple and straightforward!

over 1 year ago ·

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

over 1 year ago ·

Sorry for posting messed up code, fixed now.

Tested in chrome, ff, safari and ie 8,9,10. Everything seems fine now

over 1 year ago ·

"Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly": http://harvesthq.github.io/chosen/

over 1 year ago ·

To save yourself from downloading an extra image you could base64 encode it:
url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==")

over 1 year ago ·

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.

over 1 year ago ·

Fail in Chrome on Mac ;)

over 1 year ago ·

how can you add an outline effect to the div? also, default arrow still displays on ff for mac. any suggestions?

over 1 year ago ·

Doesnt work on Chrome/MacOS

over 1 year ago ·

Works for me on Chrome/MacOS just fine. Thanks for the easy CSS snippet!

over 1 year ago ·

Nice! I've forked the codepen to use a CSS triangle instead of an image: http://codepen.io/sqrbrkt/details/Asbxf/

over 1 year ago ·

Great tip! Thanks a lot

over 1 year ago ·

Thanks!

over 1 year ago ·

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.

over 1 year ago ·

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.

over 1 year ago ·

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?

over 1 year ago ·

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 =)

over 1 year ago ·

Cool! It works in latest IE too!

over 1 year ago ·

Works nicely, thanks to you and aubricus.

over 1 year ago ·
over 1 year ago ·

Why width:130% ?

over 1 year ago ·

More responsible and without defined width.
Check it out here (Sass): http://codepen.io/fil_dev/pen/oZNXzw

over 1 year ago ·

for hide arrow in IE use
select::-ms-expand {
display: none;
}

over 1 year ago ·

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?

over 1 year ago ·

awesome thanks for share tips

over 1 year ago ·

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.

over 1 year ago ·

Nice, Simple and Straight forward!

over 1 year ago ·

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.

12 months ago ·

wooo that's a really cool tip, thanks! i'm new to this forum, is there a way to upvote comments and tips?

3 months ago ·

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.

3 months ago ·