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

Поскольку вы не можете поставить / снять флажок, если он не отображается,

Я предлагаю вам использовать псевдоэлемент ::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>

Надеюсь, это поможет.

Answer 2

Вы не можете использовать display:none; или visibility:hidden; на <input type="checkbox"/> для проверки или снятия отметки с помощью клавиши 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 на -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 .