How to style radio button and checkbox

Hello there, hope you are doing well! Today I am going to present how to style radio button and checkbox.

Ever wondered! to customize radio button and checkbox, but without JavaScript? Thanks to CSS3 you can! With CSS3 we can customize web presentations to be almost anything we want it to be. In this post, as the title says, I am going to customize the look of radio button and checkbox.

How to style radio button and checkbox

DOM structure for Radio button

<label class="custom-radio-button">
 <input type="radio" /> 
 <span class="helping-el"></span>
 <span class="label-text">Customize</span>
</label>

CSS for customize Radio button

label.custom-radio-button input[type="radio"] {
	opacity:0;
}

label.custom-radio-button input[type="radio"] ~ .helping-el {
	background-color: #FFFFFF;
	border: 2px solid #009688;	
	border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
    padding: 11px;
    position: relative;
    top: 3px;
}

label.custom-radio-button input[type="radio"]:checked ~ .helping-el {
    border: 2px solid #009688;
}

label.custom-radio-button input[type="radio"]:checked ~ .helping-el:after {
	background-color: #009688;
    border-radius: 50%;
    content: " ";
    font-size: 33px;
    height: 16px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 16px;
	
}

DOM structure for Checkbox

<label class="custom-checkbox">
 <input type="checkbox" /> 
 <span class="helping-el"></span>
 <span class="label-text">Customize</span>
</label>

CSS for customize Checkbox

label.custom-checkbox input[type="checkbox"] { 
	opacity:0;
}

label.custom-checkbox input[type="checkbox"] ~ .helping-el{
	background-color: #FFFFFF;
	border: 2px solid #009688;	
	border-radius: 2px;
    display: inline-block;
    padding: 10px;
    position: relative;
    top: 2px;
}

label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el{ 
	border: 2px solid #009688;
	background-color: #009688;
}

label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el:after {
    color: #FFFFFF;
    content: "\2714";
    font-size: 20px;
    font-weight: normal;
    left: 2px;
    position: absolute;
    top: -6px;
    transform: rotate(10deg);
}

Conclusion

Alright, so how cool it is, right? 🙂

BTW: This technique to customize radio button and checkbox input type and certainly you can enhance the look to be more stunning.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s