Skip to content

Instantly share code, notes, and snippets.

Stu Cox stucox

  • London, UK
View GitHub Profile
stucox / demo.html
Created Apr 30, 2012
Styled checkboxes with pure CSS
View demo.html
<!DOCTYPE html>
Styled checkboxes with pure CSS (almost)
The idea is that using the `:before` pseudo-class allows us to define the checkbox style in pure CSS, using the 'content' attribute to define the check symbol used and the `:checked` pseudo-selector to switch it. `:before` has to be on the subsequent element so that we can select it properly (you can't define `:before` for <input> elements).
IE 8 doesn't support `:checked` so we switch a class on it using jQuery and IE 6 & 7 don't support `:before` so we add a <span> to do its job.
*** IE fallbacks currently don't work! Feel free to suggest fixes :-) ***
You can’t perform that action at this time.