mod*_*diX 4 html css asp.net checkbox
我使用一些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>只要我将TextASP复选框的属性设置为既不是也不null是String.Empty.当我没有设置它或将其设置为空字符串时,生成的HTML将不包含跟随的label标记,因此我的CSS将无法工作.
有没有办法设计没有以下标签标签的复选框？
Bla*_*sen 13
为了让你的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>| 归档时间： |
|
| 查看次数： |
8273 次 |
| 最近记录： |