Question

我在下面有一个简单的表格（在这里：https://codepen.io/anon/pen/QxKrex）。当你点击它时，该复选框可以正常工作，但是当你关注它时（在＃34;选项卡＆＃34;来自文本字段之后）并按空格键，我希望它也会被标记。但是，它似乎不起作用。有什么想法吗？

的index.html

＆＃13;

.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';
    }

＆＃13;

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

＆＃13;

Answer 1

您无法使用display:none;上的visibility:hidden;或<input type="checkbox"/>来检查或取消选中 SPACE 键。但是您使用opacity:0;来隐藏复选框元素，可以隐藏元素：

＆＃13;

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

＆＃13;

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

＆＃13;

忽略＆＃34;真实＆＃34; tabindex上的复选框，您需要设置tabindex attribute to -1。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

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

请参阅工作代码段，并附上一些评论：

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

希望它有所帮助。

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

2 个答案: