CSS：按下空格键时未选中复选框

Question

我有下面的简单表格（这里是：https://codepen.io/anon/pen/QxKrex）。 当您单击复选框时，该复选框会起作用，但是我希望当您将注意力集中在它上面（在文本字段中的“选项卡”之后）并按空格键时，它也会被标记。但是，它似乎不起作用。有什么想法吗？

index.html

.labelCheckbox {
        display: contents;
    }
    
    .checkbox label {
        float: left;
        padding-left: 0px !important;
        font-size: initial;
    }
    
    input[type=checkbox] {
        opacity: 0;
    }
    
    input[type="checkbox"]{
        display: none;
    }
    
    input[type="checkbox"] + label::before{
        background-color: white;
        border: 1px solid #135BCF;
        content: '';
        display: inline-block;
        height: 22px;
        width: 22px;
        text-align: center;
        margin: 0 5px -2px 0;
        overflow: hidden;
        top: 3px;
        position: relative;
        float: initial;
    }
    
    input[type="checkbox"]:checked + label::before{
        content: '\2713';
    }

<form action="/send.php" method="post" name="myForm">
      <label for="fname"></label>
      <input type="text" id="fname" name="fname" placeholder="Name" required>
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1" tabindex="0;"></label>
      <label class="labelCheckbox">&nbsp&nbspI agree</label>
      <button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
    </form>

Answer 1

您不能在<input type="checkbox"/> 上使用display:none; 或visibility:hidden; 来通过SPACE 键选中或取消选中。但是您使用opacity:0; 隐藏复选框元素，隐藏元素很好：

input[type="checkbox"] {
  opacity:0;
}
input[type="checkbox"] + label {
  outline:0;
  user-select:none;
}
input[type="checkbox"] + label::before {
  background:#fff;
  border:1px solid #999;
  content:'';
  display:inline-block;
  height:22px;
  overflow:hidden;
  position:relative;
  text-align:center;
  top:7px;
  width:22px; 
}
input[type="checkbox"]:checked + label::before {
  content:'\2713';
}
input[type="checkbox"]:focus + label::before {
  border-color:#135BCF;
}

<form action="/send.php" method="post" name="myForm">
  <label for="fname"></label>
  <input type="text" id="fname" name="fname" placeholder="Name" required>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" tabindex="-1"></label>
  <label class="labelCheckbox">I agree</label>
  <button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
</form>

要忽略 tabindex 上的“真实”复选框，您需要设置 tabindex attribute to -1。

---

您可以改进自定义复选框元素，如下所示：

input[type="checkbox"] {
  opacity:0;
}
input[type="checkbox"] + label {
  margin-left:10px;
  outline:0;
  padding-left:5px;
  position:relative;
  user-select:none;
}
input[type="checkbox"] + label::before {
  background:#fff;
  border:1px solid #999;
  content:'';
  height:22px;
  left:0;
  position:absolute;
  text-align:center;
  transform:translate(-100%,-50%);
  top:50%;
  width:22px;
}
input[type="checkbox"]:checked + label::before {
  content:'\2713';
}
input[type="checkbox"]:focus + label::before {
  border-color:#135BCF;
}

<input type="text" value=""/>
<input type="checkbox" id="checkbox1">
<label for="checkbox1" tabindex="-1">I agree</label>
<button>OK</button>

使用此复选框元素，您还可以单击标签文本以选中复选框。您还可以使用 TAB 聚焦控件并使用 SPACE 选中和取消选中复选框。

Answer 2

如果未显示复选框，则无法勾选/取消勾选，

我建议你使用::after 伪元素来覆盖常规复选框。

查看工作 sn-p，以及一些 cmets：

.labelCheckbox {
  display: contents;
}

.checkbox label {
  float: left;
  padding-left: 0px !important;
  font-size: initial;
}

/* TAKIT: Added this */
input[type="checkbox"] {
  position: relative;
}

/* TAKIT: Changed a little the style below */
input[type="checkbox"]::before {
  display: inline-block;
  position: absolute; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -0.33em;
  border: 1px solid #135BCF;
  background-color: white;
  text-align: center;
  content: '';
}

input[type="checkbox"]:checked::before {
  content: '\2713';
}

<form action="/send.php" method="post" name="myForm">
  <label for="fname"></label>
  <input type="text" id="fname" name="fname" placeholder="Name" required>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" tabindex="0;"></label>
  <label class="labelCheckbox">  I agree</label>
  <button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
</form>

希望对你有帮助。