Advanced Search

Return to Snippet

Revision: 53265
at November 17, 2011 19:25 by melomano
Initial Code 
div {position: relative;}
	
div > input {
	height: 16px;
	width: 16px;
	position: absolute;
	left: 0;
	opacity: 0;
}

div > label { 
	line-height: 16px; 
	padding: 0 0 0 18px;
	font-size:15px;
}

input + label {
	background: url(../img/gr_custom-inputs.png) 0 -1px no-repeat;
	height: 16px;
}

input[type=radio] + label { background-position: 0 -161px; }

/* Checked styles */
input[type=radio]:checked + label { background-position: 0 -241px; }
input[type=checkbox]:checked + label { background-position: 0 -81px; }

/* Disabled styles */
input[type=radio]:disabled + label { background-position: 0 -221px; }
input[type=checkbox]:disabled + label { background-position: 0 -61px; }

/* Disabled and Checked styles */
input[type=radio]:disabled:checked + label { background-position: 0 -301px; }
input[type=checkbox]:disabled:checked + label	{ background-position: 0 -141px; }


<div><input type="radio" value="male" id="male" name="gender" /> <label for="male">Male</label></div>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
checkbox & radio custom style

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS