选择框样式

admin · 发表于 2018-11-17 16:34:29

您需要登录才可以下载或查看，没有账号？立即注册

x

这是在工作中遇到需要美化单选框和复选框查资料看到别人的，特别声明此文是转载别人，在此感谢原作者。
觉得很有用在此码起来原理就是：隐藏选择框本身，在利用<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>
<br><br><br><br>
<label><input type="radio" name="a" value="1"><i>✓</i>单选框</label><br>
<label><input type="radio" name="a" value="2"><i>✓</i>单选框</label><br>
<label><input type="radio" name="a" value="3"><i>✓</i>单选框禁用</label><br>
<label><input type="radio" name="a" value="4"><i>✓</i>单选框禁用已选</label><br>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[HTML5/CSS3] 选择框样式