2

Есть форма в попап окне красная кнопка Отправить заявку Не получается стилизовать чекбоксы в Google Chrome не ставиться галочка в чекбоксах в Firefox работает как исправить? Ссылка на сайт

1

1 ответ 1

1

Не важно какой плагин вы используете, единственный момент, какая структура HTML-разметки, такая:

<label>
 <input type='checkbox'/>
 <span>чекбокс 1</span>
</label>

или такая:

<input type="checkbox"/ id="checkbox_1">
<label for='checkbox_1'>Чекбокс 2</label>

Если не ошибаюсь в CF7 можно прикручивать пользовательские классы к полям формы.

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

.checkbox {
	display: block;
}
.checkbox__choice {
	margin: 0 3px 0 0;
	width: 17px;
	height: 17px;
}
.checkbox__label {
	display: block;
	cursor: pointer;
	position: relative;
	padding: 0 0 0 25px;
	line-height: 20px;
	color: #000;
	font-size: .875rem;
    opacity: .8;
}
.checkbox__choice {
  position: absolute;
  opacity: 0;
}
.checkbox__label::before {
    border: 4px solid #52afec;
    border-radius: 50%;
	content: '';
	position: absolute;
	top: 3px;
	left: 0;
	width: 10px;
	height: 10px;
}
.checkbox__choice:checked + .checkbox__label::before {
    background-color: #52afec;
}
.checkbox__choice:checked + .checkbox__label {
    opacity: 1;
}
<label class="checkbox">
  <input type="checkbox" class="checkbox__choice" name="feedback_agreement">
  <span class="checkbox__label">Я принимаю условия <a class="link" href="/user_agreement/" target="_blank">пользовательского соглашения</a> и даю своё согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ "О персональных данных", на условиях и для целей, определенных <a class="link" href="/privacy_policy/" target="_blank">Политикой конфиденциальности</a>
  </span>
</label>

1
  • Если честно, уже не актуально, но благодарю за ответ)
    – Viorel
    3 июл 2018 в 21:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.