Я работал над сайтом, который был построен в WordPress с использованием bootstrap шаблонов. Этот сайт изначально не был создан мной, поэтому время от времени у меня возникают проблемы с его внедрением. Веб-сайт использует пряжу для создания папки 'dist' из node.js модулей и элементов, содержащихся в папке темы. Таблицы стилей - это s css файлы. После завершения процесса сборки была создана папка 'dist' для загрузки в папку темы, которая содержит все объединенные таблицы стилей, изображения и т. Д. c.
У меня возникли проблемы с форма, которая создается через контактную форму 7, и я не уверен, если это проблема, связанная с процессом сборки с использованием пряжи или что-то еще. Проблема с флажком, который я добавил в форму. Он работает, как и ожидалось, на настольных дисплеях, но когда сайт просматривается в iPhone (через Chrome, приложения Safari и браузер Google), флажок не отображается при клике.
Просто для пояснения последние несколько веб-сайтов, которые я создал сам, которые включают форму с флажком или флажками, отлично работают на настольных компьютерах и IOS устройствах. Я использую css таблицы стилей, а не s css, но я использовал все те же стили на обоих сайтах, которые работают нормально, и на тех, которые не работают на IOS, поэтому я действительно не понимаю, почему флажок не работает на мобильном телефоне. Я также попытался применить несколько других исправлений, которые также не помогли решить проблему.
Ниже приведены код html и код s css для раздела флажков на сайте:
<div class="af-field af-field-type-checkbox af-field-checkbox acf-field acf-field-checkbox">
<div class="af-label acf-label">
<label for="brochure-pack-checkbox">Please send me a Giraffe Equity Release brochure pack</label>
</div>
<div class="af-input acf-input">
<div class="acf-input-wrap">
<span class="wpcf7-form-control-wrap brochure-pack"><span class="wpcf7-form-control wpcf7-checkbox" id="brochure-pack-checkbox"><span class="wpcf7-list-item first last"><label><input type="checkbox" name="brochure-pack[]" value="Please send me a Giraffe Equity Release brochure pack"><span class="wpcf7-list-item-label">Please send me a Giraffe Equity Release brochure pack</span></label></span></span></span>
</div>
<p></p></div>
<p></p></div>
.acf-field-checkbox {
.wpcf7-list-item {
position: relative;
margin-left: 0;
width: 100%;
display: block;
}
.wpcf7-list-item-label {
font-size: 2rem;
font-weight: 600;
line-height: 1.5em;
margin-left: 35px;
display: block;
cursor: pointer;
}
.wpcf7-list-item-label:before {
position: absolute;
left: 0;
width: 28px;
height: 28px;
border: 1px solid #b79c68;
border-radius: .25rem;
display: block;
}
.wpcf7-list-item-label:after {
position: absolute;
content: '\1F5F8';
font-size: 30px;
color: #b79c68;
width: 0px;
height: 0px;
top: 2px;
left: 2px;
opacity: 0;
}
input[type=checkbox] {
display: none;
-webkit-appearance: checkbox;
}
input[type=checkbox]:checked {
+ span.wpcf7-list-item-label:after {
opacity: 1;
}
}
label {
margin-bottom: 0;
cursor: pointer;
display: block;
}
}
Я понимаю, что могут быть применены некоторые стили, которые не нужны, но они не влияют на функциональность флажков. Как только я найду правильное решение, чтобы заставить это работать для этого определенного c веб-сайта, я уберу примененные стили и удалим все ненужные.
Если у кого-то есть идея, почему флажок может не работайте над этим веб-сайтом, если он отлично работает с другими, которые я создал, я был бы очень признателен за любые советы или рекомендации, которые вы могли бы дать.
Заранее спасибо, если вам потребуется дополнительная информация о проблеме , тогда, пожалуйста, спросите, и я уверен, что смогу прояснить все, что нужно.