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

abomination of the checkbox hack all over the place. makes a fake select menu using a checkbox toggle and radio inputs. I had an idea to do this and wanted to see how plausible it was.


  1. I wonder if you could apply the ✖ to the label:after and use the section:after to apply some kind of gray box to hide it. That way it might enable clicking on that guy.

  2. done! I applied z-index to the inputs because before/after get placed above the input so you can't click them. also added :active to the input and i wish i could populate the main label with attr(data) or something in css. =(

  3. Can this support multiple select?

  4. yeah. just use a checkbox instead of a radio input field. i haven't actually used this in production so i'd test it thoroughly

  5. Nice work, Tested and working ie10,firefox,chrome,ios6. Android unfortunately the drop down button does show or work. The struggle continues.

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

You must be logged in to comment.