纯CSS3实现美化radio单选框、checkbox多选框按钮动画效果【原创】

查看演示 下载资源 下载积分： 80 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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>

4、使用样CSS式：class="input-radio"