Make customize Radio input with CSS3

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

Demo

The HTML Markup

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

<form>
	
			<input id="radio" name="radio" type="radio" >
			<label class="radio"  for="radio"> Yes </label>
			<input id="radios" name="radio" type="radio" >
			<label class="radio" for="radios"> No </label>
		
</form>

The CSS

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

<style>
	.radio{
		display: inline-block;
		cursor: pointer;
		font-size: 13px; margin-right:10px; line-height:18px;
	}
	input[type=radio]{
		display:none; 
	}
	.radio: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);
		font-size: 30px;
		border-radius: 10px;
	}
	input[type=radio]:checked + .radio:before {
		content: "\2022";
	}
</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.