一款纯css3实现简单的checkbox复选框和radio单选框

　　昨天为大家分享了一款很炫的checkbox复选框和radio单选框，今天再给大家带来一款简单实用的checkbox复选框和radio单选框。界面清淅、舒服。先给大家来张效果图：

　　实现代码：

　　html代码：

XML/HTML Code复制内容到剪贴板

<div class="frame"> <input checked="checked" id="radio_1" name="radio" type="radio">
<label class="radio" for="radio_1"> <i class="fa fa-times"></i>
</label> <input id="radio_2" name="radio" type="radio">
<label class="radio" for="radio_2"> <i class="fa fa-times"></i>
</label> <input id="radio_3" name="radio" type="radio">
<label class="radio" for="radio_3"> <i class="fa fa-times"></i>
</label> <input id="radio_4" name="radio" type="radio">
<label class="radio" for="radio_4"> <i class="fa fa-times"></i>
</label> <input id="radio_5" name="radio" type="radio">
<label class="radio" for="radio_5"> <i class="fa fa-times"></i>
</label> </div>
<div class="frame"> <input checked="checked" id="check_1" name="check" type="checkbox">
<label class="check" for="check_1"> <i class="fa fa-check"></i>
</label> <input id="check_2" name="check" type="checkbox">
<label class="check" for="check_2"> <i class="fa fa-check"></i>
</label> <input id="check_3" name="check" type="checkbox">
<label class="check" for="check_3"> <i class="fa fa-check"></i>
</label> <input id="check_4" name="check" type="checkbox">
<label class="check" for="check_4"> <i class="fa fa-check"></i>
</label> <input id="check_5" name="check" type="checkbox">
<label class="check" for="check_5"> <i class="fa fa-check"></i>
</label> </div>

学习交流

如何查找有故障的配件

热门图片

猜你喜欢的新闻

猜你喜欢的关注