纯CSS3实现美化radio单选框、checkbox多选框按钮效果,代码简单。适合快速使用,附完整使用教程
1、引入CSS样式表:
<link rel="stylesheet" type="text/css" href="input-radio.css"/>
2、定义HTML结构:单选框
<div class="select-item">
请选择搜索选型:(单选)
<label for="songlist">
<input type="radio" id="songlist" name="classic" class="input-radio"/>歌单
</label>
<label for="album">
<input type="radio" id="album" name="classic" class="input-radio"/>专辑
</label>
<label for="single">
<input type="radio" id="single" name="classic" class="input-radio"/>单曲
</label>
<label for="artists">
<input type="radio" id="artists" name="classic" class="input-radio"/>艺人
</label>
</div>
3、定义HTML结构:复选框
<div class="select-item">
请选择歌曲属性类型:(多选)<br />
<label for="POP">
<input type="checkbox" id="POP" name="classic" class="input-radio"/>流行
</label>
<label for="Rock">
<input type="checkbox" id="Rock" name="classic" class="input-radio"/>摇滚
</label>
<label for="Rap">
<input type="checkbox" id="Rap" name="classic" class="input-radio"/>嘻哈
</label>
<label for="Jazz">
<input type="checkbox" id="Jazz" name="classic" class="input-radio"/>爵士
</label>
<label for="Blues">
<input type="checkbox" id="Blues" name="classic" class="input-radio"/>蓝调
</label>
<label for="Classical">
<input type="checkbox" id="Classical" name="classic" class="input-radio"/>古典
</label>
<label for="Punk">
<input type="checkbox" id="Punk" name="classic" class="input-radio"/>朋克
</label>
<label for="Metal">
<input type="checkbox" id="Metal" name="classic" class="input-radio"/>金属
</label>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791