我使用一些 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>只要我将我的 ASP 复选框的 Text 属性设置为既不是 null 也不是 String.Empty 的东西，这就有效。当我不设置它或将其设置为空字符串时，生成的 HTML 将不包含后面的 label 标记，因此我的 CSS 将不起作用。
有没有办法设计没有following label标签的checkbox？
最佳答案
要让您的 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>关于html - 获得一个正确的方法来设计复选框，而不是后面跟着标签标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30654890/