Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Custom checkbox using CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 249
    Comment on it

    Here  is the CSS for custom checkbox. We can add our own properties in the check box.

    HTML-

    <div class="radio_input">
    	<input type='radio' id='r1'name='radios' checked='true'/>
    	<label for='r1'><span></span>
    	Male
    	</label>
    
    	<input type='radio' id='r2' name='radios'/>
    	<label for='r2'><span></span>Female</label>
    </div>

    CSS-

    .radio_input {
    			width: 330px;
    			padding-top: 20px;
    			margin: 0 auto;
    		}
    		.radio_input > input[type='radio'] {
    		    display:none;    
    		}
    		.account_form ul li .radio_input > label {    
    		    display:table;  
    		    width: auto; 
    		    color: #3F3F3F;font-weight: 300; 
    		    padding-right: 28px; 
    		}
    		.radio_input > label > span {
    		    display:table-cell;
    		    width:50px;    
    		    white-space:nowrap;    
    		}
    		.radio_input > label > span:before {
    		    content:'';
    		    width:40px;
    		    height:40px;
    		    border-radius:50%;
    		    display:inline-block;
    		    vertical-align:middle;    
    		    background-color:#545353;
    		    border: 1px solid #424242;
    		}
    		.radio_input > label > span:after {
    		    content:'';
    		    position:relative;    
    		    display:inline-block;
    		    vertical-align:middle; 
    		    left:-29px;    
    		    width:18px;
    		    height:18px;
    		    border-radius:50%;
    		    background:radial-gradient(circle at 2px 2px, #FFB156, #FF7B0B);
    		    visibility:hidden;
    		}
    		.radio_input > input[type='radio']:checked + label > span:after {
    		    visibility:visible;
    		}

    Here is the link -

    https://jsfiddle.net/fhaay0yw/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: