w7npmq
Last Updated: October 02, 2018
·
421.2K
· 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;
}

26 Responses
Add your response

9648

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

over 1 year ago ·
9656

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 ·
9665

Nice, Ivor!...
Simple and straightforward!

over 1 year ago ·
9672

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 ·
9689

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 ·
9703

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

over 1 year ago ·
9711

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 ·
11717

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 ·
11935

Fail in Chrome on Mac ;)

over 1 year ago ·
12023

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 ·
12517

Doesnt work on Chrome/MacOS

over 1 year ago ·
13934

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

over 1 year ago ·
14391

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 ·
15072

Great tip! Thanks a lot

over 1 year ago ·
15463

Thanks!

over 1 year ago ·
16235

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 ·
17967

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 ·
20858

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 ·
22573

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 ·
24808

Cool! It works in latest IE too!

over 1 year ago ·
28144

Works nicely, thanks to you and aubricus.

over 1 year ago ·
28208
over 1 year ago ·
28633

Why width:130% ?

over 1 year ago ·
28637

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

over 1 year ago ·
29007

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. https://goo.gl/dt2d7z

over 1 year ago ·
29048

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

over 1 year ago ·