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

A few different checkbox styles


  1. Very nice. I'd love to see the ability to actually drag the first three.

  2. Jeremy ... could probably be done but not with CSS alone. Would need some JS.

  3. Excellent job, Brad!

  4. How do you get the text next to the checkbox like the standard version? When I try to add a Pickme to the end of the input, the check box no longer works. Tried monkeying with the included label tag as well but am having problems getting enough width.

  5. Can you send me a link to your pen that you are working on? I couldn't find it by looking at your profile.

  6. Unfortunately, I'm not working in a pen and the code is a bit complicated (single page web app) with php page html fragments. I'm using your squaredThree checkbox. The CSS is straight from your codepen. I do have the checkbox in a list which is styled as a percentage of the browser width.

    I cannot get the html to post here without it being rendered. :(

    If you could tell me how to add the text to your code, I should be able to take it from there. Thanks again, -Chad

  7. Is this what you are looking for? http://cdpn.io/IpfHc

  8. Close, though what would it take to get it on the right side and something longer than Pickme? I probably need up to 40 characters. Just a couple other notes, on Android 2.x it shows both checkboxes. Thanks again.

  9. http://cdpn.io/IpfHc Check it now. Not sure about android.

  10. Hey Brad. I really appreciate your help. I'm able to get the text to display like we were working on, hazzah. However, somewhere along the way, I lost the ability to check and uncheck. I'm doing a project to learn CSS3 and HTML5 so I am struggling to combine some of these more complex code bits, though my code is pretty much identical to yours for the checkbox. I just have it wrapped in a list and some javascript to open the list as a popup menu with code based from here: http://css-tricks.com/snippets/jquery/styled-popup-menu/. I think I just need to start debugging and playing around. I don't want to ask for any more of your time. Thank you, sir. EDIT: I solved the checking issue via javascript. I realized I wanted the whole list 'menu' to check and uncheck, not just the checkbox.

  11. I'm glad you got it working @cdelstad

  12. I am trying to create a list of checkboxes.

    When using the code above, only the first checkbox regardless of which check box I click on.

    Is there a simple way to fix this?

  13. Can you create a pen that shows what you are trying to do? I can better help you there.

  14. Great job - perhaps you should add this CSS code which shows (not perfect) the CLASS used :-) section>div[class]:before { content: "."attr(class); color: white; position: absolute; top: -5em; left: -1.2em; letter-spacing: 1px; font-family: sans-serif; font-weight: normal; font-size: 13px; }

  15. Thanks @netsi1964 ! I liked your idea. I had to add it a different way though.

  16. I particularly like the ghosted checks on hover.

  17. nice job. thanks for sharing!

  18. Nice Brad... Good work with a difficult topic. Thank you

  19. Cool idea! Check out my fork, it looks better in IE and Firefox (I get a weird bug with the "OFF" tag in Chrome) http://codepen.io/EderIraizoz/pen/XJaOGV

  20. @ederlraizoz I'm not getting an error in chrome. There have been times when chrome acted funny before with 3d translations. You can force hardware acceleration and fix it a lot of times. Check out this article http://bit.ly/1yesfth .

  21. Galo @darkgrenzenlos on

    Tried to put a text inside the Label and it won't align properly, If I added a Span and have a separate class it would but that defeats to purpose of the label, any way to align the text?

  22. @darkgrenzenlos You're right. In this instance the label is being used as part of the slider. If you need to add text to it I would do it outside of the button.

  23. Is it possible to do this in a way that supports keyboard navigation/activation?

  24. @bbodine1 Thank you, thank you, thank you, Brad !!! These are awesome, and I love that you not only are sharing these for free, but you seem to be giving much support to the community around this. I for one, am very grateful for people like you. :-)

  25. Awesome awesome!

  26. Good job. I think that increasing the clickable area on first 3 checkboxes would make it even better.

  27. It needs the ability to support checkbox labels without rendering them on top of the checkbox itself. Trying to position the label correctly screws up the checkbox rendering. At least on "roundedOne"; I haven't tried the others.

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

You must be logged in to comment.