w7npmq
Last Updated: February 23, 2017
·
224.3K
· oldboy
Avatar

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

24 Responses
Add your response

9648
511fe713eb87c8fb068fc642c041aa70

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

over 1 year ago ·
9656
C740358b2cce341557a23ffb981aacf2

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
Icflorescu

Nice, Ivor!...
Simple and straightforward!

over 1 year ago ·
9672
Ca4c025cfa455b36d130c37a3fbf5032

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
Avatar

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
E5721983ffdb3b79fc021ea010f62d24

"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
9bb05e2462b2c18284522554bbdeffa6

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
Caa7af8a90faf2b3f5c764f04d362154

Fail in Chrome on Mac ;)

over 1 year ago ·
12023
0  gnh4zaqg33u7ysu3vxc4r ncikuf0pu30cb4rhqg6kwrui2fuqxnunvusxku4j8cyn9cyookwmx

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
0 idv5bdj6bwwzwef9iid9b7olbixlimf9whavb7zbzswzqo4nbfowdf2mw60vewavoo4uehqexsfo

Doesnt work on Chrome/MacOS

over 1 year ago ·
13934
Cowsuit2 normal

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

over 1 year ago ·
14391
7854b0ed73179838e921f51c0f2b6ddc

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
B4dh0vqk normal

Great tip! Thanks a lot

over 1 year ago ·
15463
0 uti7lybsnd vyixq21myl0xsq7rwyqxqmv0rl0xjiexstgenhnr wxk1v3kvjty4sldloznzfofl

Thanks!

over 1 year ago ·
16235
85716fd230c072f4a9e7a0c5c62ee850

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
1323f2be390e9c0ff9b3fda2862267ba normal

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
None

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
0  t1f1vz7i35k0vkheribux2micvk0udlh5bwv7smwkrlsiwtq5idjwbm2qsl0eq8orwdzaqaffs5yxkh7 9rrazgcfsxy0d3o 9xrfhfw67end9gq 8ekuaogt8qz0sr ltiblflqnp

Cool! It works in latest IE too!

over 1 year ago ·
28144

Works nicely, thanks to you and aubricus.

6 months ago ·
28208
5 months ago ·
28633

Why width:130% ?

2 days ago ·
28637

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

about 1 hour ago ·