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:
<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>
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 2 5px;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:
<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>
例2:
css:
input[type=checkbox]:checked +i{color: #39bc56}
html radio点击变颜.rad_2 .glyphicon-check{color: #aeb3b9}
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 >
选项⼀
</span>
</label>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。