Чистые CSS-флажки не работают в WordPress

Я нашел чистые флажки CSS, которые я хотел использовать ( http://codepen.io/imohkay/pen/zFwec) на сайте WordPress, который использует плагин Contact Form 7. После нажатия на эти флажки ничего не происходит.

Я скопировал весь CSS и изменил классы только для того, чтобы подогнать его под HTML, сгенерированный Контактной формой 7 через WordPress.

HTML:

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}
<input type="checkbox" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>
<span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox001[]" value="Poprawić zaangażowanie pracowników">&nbsp;<span for="checkbox001[]" class="wpcf7-list-item-label">Option b</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Otrzymywać niefiltrowany feedback z terenu">&nbsp;<span class="wpcf7-list-item-label">Option c</span></span>

Я не могу найти, что здесь не так

Источник

2 ответа

Решение

Проблема становится понятной, если вы удалите opacity: 0; от input[type="checkbox"]:

input[type="checkbox"] {
  position: absolute;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}
<input type="checkbox" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>
<span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox001[]" value="Poprawić zaangażowanie pracowników">&nbsp;<span for="checkbox001[]" class="wpcf7-list-item-label">Option b</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Otrzymywać niefiltrowany feedback z terenu">&nbsp;<span class="wpcf7-list-item-label">Option c</span></span>

Флажок ставится перед псевдоэлементом в HTML, поэтому располагается позади него. Чтобы исправить, внесите следующие изменения:

  • добавлять z-index: 1; в input[type="checkbox"] поставить флажок над псевдоэлементом и, следовательно, кликабельным
  • Установить width а также height на input[type="checkbox"] чтобы он соответствовал размерам псевдоэлемента 

input[type="checkbox"] {
  height: 28px;
  opacity: 0;
  position: absolute;
  width: 28px;
  z-index: 1;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}
<input type="checkbox" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>
<span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox001[]" value="Poprawić zaangażowanie pracowników">&nbsp;<span for="checkbox001[]" class="wpcf7-list-item-label">Option b</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Otrzymywać niefiltrowany feedback z terenu">&nbsp;<span class="wpcf7-list-item-label">Option c</span></span>

Источник

Проблема в том, что ваш флажок не проверяется при нажатии, чтобы решить, что добавить идентификатор для каждого из них. т.е.

<input type="checkbox" id="checkbox001[]" ... >
<label for="checkbox001[]" ... >

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

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}
<input type="checkbox" id="checkbox001[]" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>

Источник
Другие вопросы по тегам