{"id":29493,"date":"2015-11-03T18:32:06","date_gmt":"2015-11-03T13:02:06","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=29493"},"modified":"2015-11-04T10:39:05","modified_gmt":"2015-11-04T05:09:05","slug":"how-to-create-stylish-select-boxradio-buttoncheckbox","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-create-stylish-select-boxradio-buttoncheckbox\/","title":{"rendered":"How to create Stylish Select-box,Radio button,Checkbox"},"content":{"rendered":"

Stylish Select-box<\/h3>\n

HTML<\/strong><\/p>\n

[java]
\n<select class="selectBox">
\n<option>Select<\/option>
\n<option>New Delhi<\/option>
\n<option>Mumbai<\/option>
\n<\/select>
\n[\/java]<\/p>\n

CSS<\/strong><\/p>\n

[java]
\n.selectBox{
\nappearance: none;-webkite-appearance: none;-moz-appearance: none;-o-appearance: none;-ms-appearance: none;
\nbackground: #f5f5f5 url(‘image-path’) no-repeat right center;
\nborder: 1px solid #eeeeee;
\nwidth:300px;
\nheight:40;
\npadding:10px;
\n}
\n[\/java]<\/p>\n

Stylish Radio button<\/h3>\n

HTML<\/strong><\/p>\n

[java]
\n<input type="radio" value="" class="radioBtn"\/><label><\/label>
\n[\/java]<\/p>\n

CSS<\/strong><\/p>\n

[java]
\n.radioBtn {
\n vertical-align: middle;
\n width: 15px;
\n height: 15px;
\n opacity: 0;
\n}<\/p>\n

.radioBtn + label:before {
\n content: "";
\n display: inline-block;
\n margin: 0 0 0 -20px;
\n vertical-align: middle;
\n height: 15px;
\n width: 15px;
\n background: url(‘image-path’) no-repeat left top;
\n}<\/p>\n

.radioBtn:checked + label:before {
\n background-position: left bottom;
\n}
\n[\/java]<\/p>\n

Stylish Checkbox<\/h3>\n

HTML<\/strong><\/p>\n

[java]
\n<input type="checkbox" value="" class="checkboxBtn"\/><label><\/label>
\n[\/java]<\/p>\n

CSS<\/strong><\/p>\n

[java]
\n.checkboxBtn {
\n vertical-align: middle;
\n width: 15px;
\n height: 15px;
\n opacity: 0;
\n}<\/p>\n

.checkboxBtn + label:before {
\n content: "";
\n display: inline-block;
\n margin: 0 0 0 -20px;
\n vertical-align: middle;
\n height: 15px;
\n width: 15px;
\n background: url(‘image-path’) no-repeat left top;
\n}<\/p>\n

.checkboxBtn:checked + label:before {
\n background-position: left bottom;
\n}
\n[\/java]<\/p>\n

Note :-As per requirements You Can change background,border,width,height.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Stylish Select-box HTML [java] <select class="selectBox"> <option>Select<\/option> <option>New Delhi<\/option> <option>Mumbai<\/option> <\/select> [\/java] CSS [java] .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; } [\/java] Stylish Radio button HTML [java] <input type="radio" value="" class="radioBtn"\/><label><\/label> [\/java] CSS [java] .radioBtn { vertical-align: middle; width: 15px; height: […]<\/p>\n","protected":false},"author":228,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-29493","post","type-post","status-publish","format-standard","hentry","category-technology"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t