获得一个正确的方法来设计复选框，而不是后面跟着标签标签

Question

我使用一些 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？

JSBIN Example (Preview)

Answer 1

要让您的 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>

Answer 2

我认为没有外部标签就无法设计复选框。因为您不能在语义上将 :after 或 :before 伪元素应用于非容器元素，所以此规则的例外是 chrome 浏览器，我们可以在其中将 :after 和 :before 应用于非容器元素。如果您想在 chrome 浏览器中运行您的网络应用程序，请遵循以下代码。

input[type=checkbox] { 
  visibility: hidden;
  cursor: pointer;
}

input[type=checkbox]:before {
  position: relative !important;
  padding-right: 3px;
  top: 1px;
  font-family: 'Arial' !important;
  font-style: normal;
  font-weight: normal;
  content: "O";
  color: #333;
  visibility: visible;
}
input[type=checkbox]:checked:before {
  content: "X";
  color: #ffa500;
}

<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 -->

请查看代码片段，代码的工作方式是在父元素上使用 visibility: hidden，然后在子元素上使用 visibility: visible :before 伪元素。注意：这不适用于 firefox 浏览器。

Answer 3

因此，我无法使用仅一个复选框输入，因为您无法将伪元素应用于输入。但是这个解决方案不依赖于任何 JS，并且可以让您完全控制复选框的外观，甚至允许您在需要时在输入上设置禁用状态：

input[type="checkbox"] {
  display: none;
}

label i:before {
  position: relative;
  padding-right: 3px;
  top: 1px;
  font-family: 'Arial';
  font-style: normal;
  font-weight: normal;
  content: "O";
  color: #333;
}

label input:checked + i:before {
  content: "X";
  color: #ffa500;  
}

label input[disabled] + i:before {
  opacity: .25;
}

<label>
  <input type="checkbox">
  <i></i>
</label>

标签不需要 for 属性，因为它包装了输入，并将充当您的 click 处理程序。我需要 <i> 元素，因为我无法判断 child <input> 是否是 :checked.

希望这会有所帮助，不确定如果 <i> 元素为空是否有效，但您始终可以在其中添加一个   并将 font-size 设置为 0。

Answer 4

不要使用复选框试试

//HTML
<span class="my-custom-checkbox">
    <i class="fa fa-check" style="visibility:hidden"></i>
</span>

//CSS

.my-custom-checkbox{
    border:1px solid #555;
    border-radias:4px;
    height:8px;
    width:8px;
}
.my-custom-checkbox>i{
    color:#555;
}

// jQuery code

$(".my-custom-checkbox").click(function(event){
    var selector=$(this).find("i.fa");

    if(selector.css("visibility")=="hidden"){
        selector.css("visibility","visible");
    }
    else{
        selector.css("visibility","hidden");
    }
});

这种直线型让您可以自由地以较低的成本实现您的需求。

获得一个正确的方法来设计复选框，而不是后面跟着标签标签

Get a proper way to design the checkbox without being followed by a label tag

html

css

asp.net

checkbox