我使用一些 CSS 来重新设计 ASP.NET 中的复选框：
input[type=checkbox] {
display: none !important;
cursor: pointer;
}
input[type=checkbox]:not([disabled]) + label {
cursor: pointer;
}
input[type=checkbox] + label:before {
position: relative!important;
padding-right: 3px;
top: 1px;
font-family: 'Arial' !important;
font-style: normal;
font-weight: normal;
content: "O";
color: #333;
}
input[type=checkbox]:checked + label:before {
content: "X";
color: #ffa500;
}
<input type="checkbox" id="myCheckbox"><label for="myCheckbox">Click</label>
只要我设置，这就有效Text我的 ASP 复选框的属性既不是null nor String.Empty。当我不设置它或将其设置为空字符串时，生成的 HTML 将不包含以下内容label标签，因此我的 CSS 将无法工作。
有没有办法设计没有以下标签的复选框？
JSBIN 示例（预览） http://jsbin.com/rimaconoja/2/edit?html,css,output
为了让 CSS 正常工作，修改 CSS 比让 ASP 正常工作要容易得多。这是一个基于输入而不是不稳定标签的工作版本。
input[type=checkbox] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0
}
input[type=checkbox]:after {
padding-right: 3px;
top: 1px;
font-family: 'Arial' !important;
font-style: normal;
font-weight: normal;
font-size: 18px;
content: "O";
color: #333;
display:block;
}
input[type=checkbox]:checked:after {
content: "X";
color: #ffa500;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input id="cb1" type="checkbox" name="x$cb1" checked="checked"></input><label for="cb1"></label>
<br />
<input id="cb1" type="checkbox" name="x$cb2" checked="checked"><!-- not visible -->
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
