css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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.