In this blog we are going to explain how to create custom checkbox and radio button using CSS. I have write CSS and HTML code separately, You can easily understand complete code. This blog is very useful for developers. radio-checkbox-button CSS :- **/*Radio button*/ .radio, .checkbox{display: inline-block;} .radio { padding:5px; margin-left:40px; } .radio input[type="radio"] { opacity: 0; position: absolute; cursor:pointer;} .radio input[type="radio"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; } .radio input[type="radio"]:checked + label > mark:before { content:' '; background:#0d7fbe; width:12px; height:12px; display:inline-block; margin:4px; border-radius:20px;} ...... HTML : - <div class="radio"> <input type="radio" name="id" id="id_0" value="x"> <label for="id_0"><mark></mark> Yes</label> </div> <div class="radio"> ...... You should read the complete blog visit- http://findnerd.com/list/view/custom-checkbox-and-radio-button-using-pure-css/3173.
Topics
