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.