CSS: флажок не установлен при нажатии клавиши пробела

У меня есть простая форма ниже (и здесь: 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>

wiki.accede-web.com/en/notices/interfaces-riches-javascript/‌…

— 07.06.2018 12:47

html css checkbox

07.06.2018 12:38

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

3 650

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.

Обратите внимание, что при этом фокус не отображается в поле флажка, и вам нужно сделать дополнительную вкладку, чтобы перейти к кнопке.

— 07.06.2018 12:47

Выглядит неплохо! Невозможно больше иметь этот "видимый фокус" на флажке? Синий квадрат, когда у вас установлен флажок?

— 07.06.2018 12:58

а что с ENTER?

— 22.03.2019 18:53

07.06.2018 12:44

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

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

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

07.06.2018 13:26