个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 16:51:02 25 4
gpt4 key购买 nike

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

最佳答案

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

25 4 0
文章推荐： c# - for 循环中计数器变量的范围是什么？
文章推荐： Angular 2 属性指令输入值未定义且设置不正确
文章推荐： c - sqrt() 函数不适用于可变参数
文章推荐： php - 如何使用php计算excel pmt