Чистые 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"> <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"> <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"> <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"> <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"> <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"> <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>