纯CSS美化单复选框(checkbox、radio)

 开发  css   2018-03-16 17:10   评论次 

具体原作者不明,本文转载于http://blog.csdn.net/joeone_strong/article/details/70160562,侵删。

原理是:隐藏选择框本身,在利用<i>标签放在原来选择框位置上。

代码是:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择框样式</title>
<style>
label {font-size:12px;cursor:pointer;}
label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;}
input[type="checkbox"],input[type="radio"] {display:none;}
input[type="radio"] + i {border-radius:7px;}
input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#2489c5;}
input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;}
input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;}
</style>
</head>
<body>
<label><input type="checkbox"><i></i>复选框</label><br>
<label><input type="checkbox" checked><i></i>复选框</label><br>
<label><input type="checkbox" disabled><i></i>复选框禁用</label><br>
<label><input type="checkbox" disabled checked><i></i>复选框禁用已选</label><br>
<label><input type="radio" name="abc"><i></i>单选框</label><br>
<label><input type="radio" name="abc" checked><i></i>单选框</label><br>
<label><input type="radio" name="abc" disabled><i></i>单选框禁用</label><br>
<label><input type="radio" name="def" disabled checked><i></i>单选框禁用已选</label><br>
</body>
</html>

效果是:

QQ截图20180316170954

点赞 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

交流分享

QQ扫一扫或点击二维码加入,群号577543189
微信扫一扫,手滑关注它
微信扫一扫,进入小程序

推荐文章

标签云集

友情链接  交换友链

推广位