css单选/多选按钮样式改变_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;
 }
1
2
3
4
5
6
7
8
9

HTML:

<input type="radio" class="radios" name="kind" id="status_on1"  value="1"  checked="checked"/>
<label for="status_on1" class="rad_1" data-id="1">radio1</label>
<input type="radio" class="radios" name="kind" id="status_on2" value="2"/>
<label for="status_on2" class="rad_1" data-id="2">radio2</label>
<input type="radio" class="radios" name="kind" id="status_on3"  value="3"/>
<label for="status_on3" class="rad_1" data-id="3">radio3</label>
1
2
3
4
5
6

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;}
1
2
3

HTML:

<input type="checkbox" class="checkboxs" name="years[]" id="status_ono{$i}" value="{$vo.id}" checked="checked"/>
<label for="status_ono{$i}" data-id="{$i}" class="rad_2">{$vo.batchnum|date='Y',###}</label>
1
2

例2:
css:

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

html:

<label for="ch1" data-id="1" class="rad_2">
                <input type="checkbox" class="checkboxs" name="" id="ch1" value="1"/>
                <i class="glyphicon glyphicon-check"></i>
                <span style="color: red;">
                    选项一
                </span>
            </label>
1
2
3
4
5
6
7