CSS:按空格键时未选中复选框
CSS:按空格键时未选中复选框
提问于 2018-06-07 18:38:06
我有下面的简单表单(这里是：https://codepen.io/anon/pen/QxKrex)。当你点击复选框时，它会起作用，但我希望当你将焦点放在它上面(在文本字段的"tab“之后)并按空格键时，它也会被标记。然而，它似乎不起作用。有什么想法吗？
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">  I agree</label>
<button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
</form>
回答 1
Stack Overflow用户
发布于 2018-06-07 19:26:34
如果复选框未显示，则无法勾选/取消勾选，
我建议您使用::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>
希望能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50739145
复制相关文章
相似问题