Ajax Loader
×

CSS Checkbox Styles

A very nice collection of checkboxes made purely in CSS3 by me. The checkboxes you see above are nothing but the labels for their respective inputs while the checkbox inputs are hidden because these have a very limited CSS styling support. These checkboxes will work in all the major browsers except Internet Explorer 8 and below.

Animations are achieved using the transition property. Extra elements like "ON" and "OFF" are created using :after and :before pseudo elements of labels or the container divs. These can be easily used in real world projects, take a look at the code to learn more about them.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

34 Comments

× New

Sign In to comment

samzalahi:

guys how to move the checkbox to left or right, help with "remember me"

bkwdesign:

Ok, got it: just add tabindex='0' to your labels to get keyboard friendly tab/focus functionality.. then, add some label:focus CSS rules to prettify it further

bkwdesign:

Would like to be able to show tab/focus. I presume we just need to add additional CSS for the :focus pseudo selector

Also having issues (at the moment) porting to my ASP MVC4 project, but.. will let you guys know how it goes for me. Inspiring work, nevertheless!

nravichandra:

Thank U.
I tried to do the same (without JS) some time ago, i failed and left it. Yours is simple and brilliant.
Great Work.

markushausammann:

Actually I can answer my own question. It works if you add another label with the proper for attribute and add the label text there. It doesn't result in semantically correct markup tough.

markushausammann:

That this can be done with CSS only is really cool and the examples are nice. I would like to ask the same question as another user has already asked. What if you need a real text label that reacts to the click?

Matt Wisniewski:

For thoes of you trying to add this to multiple checkboxes you might use some simple jquery

$('input').click(function(){
if($(this).attr('type')==='checkbox'){
$(this).toggleClass('desiredclass');
}
});

don't quote that code though a bit hard to type in this small box

kamotzatthebeach:

You said to change the id when you want multiple of the same checkbox. when I do this the checkbox animation no longer works when a different id is used. I am admittedly new to CSS, what am I doing wrong? You don't have to be gentle.

maulikshah:

hi I want to use it for asp.net checkbox control i failed to integrate with it. Please help below is the html code for the same:

only sliding is not working due to SPAN tag before checkbox input tag.

Ubuntu:

I have multiple checkboxes on a table grid, this doesn't work, please help

nodeless:

If you want a functioning label, just put another one after the dummy label:

My label

Morlas:

Great job. I was just looking for an easy way to style those bast*ards. Great job!

gadgetto:

By the way - your samples are looking very nice!

gadgetto:

Your samples are using the label tag to simulate checkboxes. But what if I need a label text?

bigbluetaurus:

Is there anyway to extend the clickable are of the square colored button (4th from the bottom) :)

antoniobrandao:

If the switch moves, it must allow for the intuitive idea of dragging. These Switches (the top ones that move) will only be complete when they are draggable! Other than that nice job. Finish it!

Kushagra Agarwal:

That's not a bog. You must use different ids if you want the same checkboxes.

Fazlur Rahman:

it has a bug when you put two same checkbox in one html.. someone please fix it :D

LukyVj:

They looks really clean and nice, why don't you try to post them :)

Kushagra Agarwal:

The sliding control on checkbox cannot be implemented without using javascript. Only "click" will work here

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+