Modify the default radio, checkbox, and select styles.

Modify the default radio, checkbox, and select styles.
Style radioselectcheckbox compatibility

Currently, the front-end page is becoming more and more effective, and the default input component style obviously cannot meet the requirements. Taking advantage of this demand in this development page, here we will sort out the methods for modifying radio, checkbox, and select.
First:

Radio and checkbox

There are two common methods to modify the default radio style.

Pure CSS

The key CSS code is as follows:

.demo1 input[type='radio'],.demo1 input[type="checkbox"]{    display:none; }.demo1 label:before{    content: "";    display: inline-block;    width: 17px;    height: 16px;    margin-right: 10px;    position: absolute;    left: 0;    bottom: 0;    background-color: #3797fc;}.demo1 input[type='radio'] + label:before{     border-radius: 8px;}.demo1 input[type='checkbox'] + label:before{     border-radius: 3px;}.demo1 input[type='radio']:checked+label:before{    content: "\2022";    color: #fff;    font-size: 30px;    text-align: center;    line-height: 19px;}.demo1 input[type='checkbox']:checked+label:before{    content: "\2713";    font-size: 15px;    color: #f3f3f3;    text-align: center;    line-height: 17px;}

• Advantage: With the full help of the advantages of CSS3, you can do it with pure CSS3 without using js and images.

• Disadvantage: poor compatibility. Only IE9 + is supported.

Js + image

• Js Code:

$(function(){    $(".demospan").bind("click",function(){        $(this).addClass("on").siblings().removeClass("on");    })    $(".piaochecked").bind("click",function(){        $(this).hasClass("on_check")?$(this).removeClass("on_check"):$(this).addClass("on_check");        // $(this).toggleClass("on_check");    })})

• Css code

.demospan{    display: inline-block;    width: 24px;    height: 18px;    /*float: left;*/    padding-top: 3px;    cursor: pointer;    text-align: center;    margin-right: 10px;    background-image: url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/inputradio.gif);    background-repeat: no-repeat;    background-position: -24px 0;}.demo21{    opacity: 0;    cursor: pointer;    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter:alpha(opacity=0);}.on{    background-position: 0 0;}.piaochecked{    display: inline-block;    width: 20px;    height: 20px;    cursor: pointer;    margin-left: 10px;    text-align: center;    background-image:  url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/checkbox_01.gif);    background-repeat: no-repeat;    background-position: 0 0;}.on_check{    background-position: 0 -21px;}.cbdemo2{    opacity: 0;    cursor: pointer;    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";    filter:alpha(opacity=0);}

• Advantage: high compatibility, support for IE6 +

• Disadvantage: js + images are troublesome.

Select

/* Select */. select {/* rewrite the border in Chrome and Firefox */border: 1px solid green;/* clear the default style */appearance: none;-moz-appearance: none; -webkit-appearance: none;/* show a small arrow in the middle of the Selection box */background: url ("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; /* Leave a position for the drop-down arrow to avoid text overwriting */padding-right: 14px;}/* clear the default choice box style of ie and hide the drop-down arrow */select: :-ms-expand {display: none ;}

The key to this method is to clear the default style and use the appearance attribute of css3, but the compatibility is poor. Only IE9 + is supported. To be compatible with earlier browsers, you can use Div for simulation.

Todo

• Compatible with the select style modification of earlier browsers

The demo link is attached: Modify the default radio, checkbox, and select styles.