Make Customize Checkbox With CSS3

Here have nice way to customize html checkbox input field with css3, without using jquery. you can see the below demo

Demo

The HTML Markup

First we creating html structure for checkbox. the html structure is as follows:

<form>
	
			<input id="Option" type="checkbox">
			<label class="checkbox" for="Option"> Option 1 </label>
			
			<input id="option2" type="checkbox" >
			<label class="checkbox" for="option2"> Option 2 </label>
			
			<input id="option3" type="checkbox" >
			<label class="checkbox" for="option3"> Option 3 </label>
			
			<input id="option4" type="checkbox" >
			<label class="checkbox" for="option4"> Option 4 </label>
		
</form>

The CSS

We are done the html structure for checkbox. so let's start the write css for checkbox input field, First we make one class and set css for label, then we will hide the checkbox input field and replace the hidden input field with the pseudo-element :before. The css is as follows:

<style>
	.checkbox {
		display: inline-block;
		cursor: pointer;
		font-size: 13px; margin-right:10px; line-height:18px;
	}
	input[type=checkbox] {
		display:none; 
	}
	.checkbox:before {
		content: "";
		display: inline-block;
		width: 18px;
		height: 18px;
		vertical-align:middle;
		background-color: #0088cc;
		color: #f3f3f3;
		text-align: center;
		box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
		border-radius: 3px;
	}
	input[type=checkbox]:checked + .checkbox:before {
		content: "\2713";
		text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
		font-size: 15px;
	}
</style>

Lastly, you can try you self and download the source code from the below links.

Try Your Self Download

  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.