cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Style a Select Box Using Only CSS. Inspired by: http://bavotasan.com/2011/style-select-box-using-only-css/


  1. The dropdown in IE seems to inherit the white font text causing the options to be invisible (against the white background.)

  2. Hello, very good examples, it must be useful for me, thank you. But you have a "Unrecognised input" in the final of code of CSS.

  3. @VictorDiCampos: Thanks! I think I fixed the error.

  4. Ugly, Ugly, Ugly, Ugly, Ugly, Ugly, Ugly, Ugly and Ugly.

  5. @wilder_ Uh... thanks??? Please keep in mind I wasn't going for style points here. This was for a site feature I needed to code 4 years ago. Feel free to fork it and make it pretty.

  6. @ericrasch how can we change the light-blue background to a different color when hovering over the options?

  7. @ericrasch if the option text is long, then it overlaps the background image, forked pen

  8. Hi @ericrasch, clever solution. Just thinking about accessibility, how do you handle the blue outline on focus? By default the the top, left and bottom will be blue but the right-hand outline will be hidden.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.