css单选/多选按钮样式改变

单选(radio)例子:

css:

input[type=radio]:checked + .rad_1, .rad_1.checked {
 background: #ccc;
 }
 .rad_1 {
 border: 1px solid #ccc;
 padding: 7px 16px;
 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
 border-radius: 5px;
 }

HTML:

radio1

radio2

radio3

ps:input的id要与label的for一致调整label的css

多选(checkbox)例子
例1:
css:

.check input{display: none;}
 input[type=checkbox]:checked + .rad_1, .rad_1.checked {background:url(__PUBLIC__/images/radio1.png) no-repeat right center;background-size:25px 25px;width: 25px;height: 25px;}
 .rad_1 {background:url(__PUBLIC__/images/radion2.png) no-repeat right center;background-size:25px 25px;width: 25px;height: 25px;}

HTML:

{$vo.batchnum|date='Y',###}

例2:
css:

input[type=checkbox]:checked +i{color: #39bc56}
 .rad_2 .glyphicon-check{color: #aeb3b9}

html:

                
                
                
                    选项一