Question

我有一个复选框，我想设计它。取消选中该复选框时，它应该有一个黑色边框，当选中该复选框时，孔复选框应该是黑色而没有钩子。下面你看看到目前为止我做了什么。可悲的是它无法工作。

我的代码：

<form>
    <input class="newsletter" type="checkbox" value="text">Ich möchte den Newsletter bekommen
</form>

input[type=checkbox]:not(old){
  width     : 13px;
  margin    : 0;
  padding   : 0;
  opacity   : 0;
}  

.newsletter:unchecked{
    width:13px;
    height: 13px;
    border: 2px solid black;
border-radius:3px;
}

.newsletter:checked{
    width:13px;
    height: 13px;
    border: 2px solid black;
    background-color:black;
border-radius:3px;
}

我的代码的第一部分应该隐藏当前的复选框。第二部分应该是未选中框时的复选框，以及选中框时的第三部分。我认为这就是你如何设置这些复选框的样式。我做错了什么？

Answer 1

这可能对您有所帮助

＆＃13;

.checkbox input[type=checkbox] {
  display: none;
}
.checkbox input[type=checkbox]:not(:checked) + label:before {
  content: "";
  border: 2px solid #000;
  height: 10px;
  width: 10px;
  display: inline-block;
}
.checkbox input[type=checkbox]:checked + label:before {
  content: "";
  border: 2px solid #000;
  height: 10px;
  width: 10px;
  background: #000;
  display: inline-block;
}

＆＃13;

<form>
  <div class="checkbox">
    <input id="check" class="newsletter" type="checkbox" value="text">
    <label for="check"> Ich möchte den Newsletter bekommen</label>
  </div>
</form>

＆＃13;

Answer 2

您需要对代码执行的第一件事是添加label，例如：

<form>
  <input class="newsletter" type="checkbox" value="text" id="newsletter" name="newsletter">
   <label for="newsletter">Ich möchte den Newsletter bekommen</label>
</form>

我还在复选框中添加了id和name属性。 id需要与for上的label属性相同才能使此技巧发挥作用。

接下来，我们需要明显隐藏复选框。我倾向于在CSS中使用一类sr-only来隐藏基于Yahoo's example的内容：

.sr-only{
  height: 1px;
  width: 1px;
  overflow: hidden
  clip: rect(1px,1px,1px,1px);
  position: absolute;
}

接下来，我们创建一个伪元素before标签。对于样式规则，我使用相邻的兄弟选择器（+）在标签是复选框的相邻兄弟时应用规则。我保留了您的班级名称，因此它只定位了班级newsletter的兄弟姐妹的标签：

.newsletter:not(checked) + label:before{
  content:" ";  
  display: inline-block;
  width:13px;
  height: 13px;
  border: 2px solid black;
  border-radius:3px;
}

:not(checked)表示在未选中newsletter时应用这些规则。

要在newsletter为checked时更改样式，我们会更改背景颜色，如下所示：

.newsletter:checked + label:before{
 background-color:black;
}

这样点击我们的伪复选框或标签中的文字将选中该框（点击标签处的所有发送焦点到该字段，因此使用复选框将检查它）。

复选框样式只有CSS

2 个答案: