How to create Stylish Select-box,Radio button,Checkbox
Stylish Select-box
HTML
<select class="selectBox"> <option>Select</option> <option>New Delhi</option> <option>Mumbai</option> </select>
CSS
.selectBox{ appearance: none;-webkite-appearance: none;-moz-appearance: none;-o-appearance: none;-ms-appearance: none; background: #f5f5f5 url('image-path') no-repeat right center; border: 1px solid #eeeeee; width:300px; height:40; padding:10px; }
Stylish Radio button
HTML
<input type="radio" value="" class="radioBtn"/><label></label>
CSS
.radioBtn { vertical-align: middle; width: 15px; height: 15px; opacity: 0; } .radioBtn + label:before { content: ""; display: inline-block; margin: 0 0 0 -20px; vertical-align: middle; height: 15px; width: 15px; background: url('image-path') no-repeat left top; } .radioBtn:checked + label:before { background-position: left bottom; }
Stylish Checkbox
HTML
<input type="checkbox" value="" class="checkboxBtn"/><label></label>
CSS
.checkboxBtn { vertical-align: middle; width: 15px; height: 15px; opacity: 0; } .checkboxBtn + label:before { content: ""; display: inline-block; margin: 0 0 0 -20px; vertical-align: middle; height: 15px; width: 15px; background: url('image-path') no-repeat left top; } .checkboxBtn:checked + label:before { background-position: left bottom; }
Note :-As per requirements You Can change background,border,width,height.