Something that has always annoyed me is the lack of customization (without javascript) of form elements. It might have been possible (other than padding) before CSS3, but CSS3 certainly has made modifying these form elements easier. Whether you want to customize the color, look and feel, or just the size of these buttons, you can now easily do it through CSS.
Step 1 – Hide the boxes
input[type=radio],
input[type=checkbox] {
display: none;
}
Step 2 – Stylize the before
.radio label:before {
border-radius: 8px;
}
.checkbox label:before {
border-radius: 3px;
}
Step 3 – Stylize the after
input[type=radio]:checked {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
input[type=checkbox]:checked {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
What you get is something like this:
14 Responses
Very nice.
Thank you very much!
I love the checkboxes at most. Coloring them would be more beatiful. Excellent tutorial.
Thanks a lot. This is gonna help me a bunch.
This is just brilliant. I can’t use it right now as a label tag is necessary for this to work (and it’s semantically incorrect to abuse it for an icon only), but the idea is brilliant and the best solution for label + input.
Nice Blog
Try the simplest method…
http://wonderdesigners.com/?p=235
And not working…
[…] Implementing Custom Checkboxes and Radio Buttons with CSS3 […]
Thank you! really nice work
[…] Implementing Custom Checkboxes and Radio Buttons with CSS3 […]
[…] Implementing Custom Checkboxes and Radio Buttons with CSS3 […]
[…] Implementing Custom Checkboxes and Radio Buttons with CSS3 […]
Awesome tutorial, very simple and easy to follow. I also found these really nice CSS3 check boxes and radio buttons – https://kodesmart.com/kode/css3-checkbox-2
display: none on an input element is bad because this takes it out of the tab order. The field will no longer be accessible by keyboard.