获取正确的方式来设计复选框，而不用跟随标签标签 [英] Get a proper way to design the checkbox without being followed by a label tag
问题描述
我使用一些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;内容：O; color：＃333;} input [type = checkbox]：checked + label：before {content：X; color：＃ffa500;}
< input type = checkboxid =myCheckbox>< label for =myCheckbox>单击< / label>
只要我将ASP复选框的 Text 属性设置为既不 null 也不是 String.Empty 。当我没有设置它或设置它为空字符串时，生成的HTML将不包含后面的标签标签，因此我的CSS将不起作用。
有没有设计复选框而没有以下标签标记的方法？
input [type = checkbox] {cursor：pointer; -webkit-appearance：none; -moz-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;内容：O;颜色：＃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>< input_id =cb1type =checkboxname =x $ cb1checked =checked>< / input>< label for =cb1>< / label> < br /> < / id>< / html>< / - >< / html>< code>
I use some CSS to redesign my checkboxes in 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>
This works as long as I set the Text property of my ASP checkbox to something that is neither null nor String.Empty. When I don't set it or set it to an empty string, the produced HTML will not contain the followed label tag, thus my CSS will not work.
Is there a way to design the checkbox without a following label tag?
To get your CSS to work, it would be much easier to modify the CSS than trying to get ASP to play nice. Here's a working version based off the inputs instead of the wonky labels.
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>
这篇关于获取正确的方式来设计复选框，而不用跟随标签标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
