Стили для чекбоксов и радиокнопок ContactForm 7

Без лишних разглагольствований. Ссылка на архив с иконками ниже.

input[type="checkbox"],
input[type="radio"] {
	display: none !important;
}

input[type="checkbox"] + span:before,
input[type="checkbox"] + label:before,
input[type="radio"] + span:before,
input[type="radio"] + label:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
	width: 1.6em;		/*Можно увеличить или уменьшить ширину*/
	height: 1.6em;		/*и высоту*/
	background-size: cover
}
input[type="checkbox"] + span:before,
input[type="checkbox"] + label:before {
	background-image: url("/wp-content/uploads/checkbox-unchecked.svg")
}
input[type="radio"] + span:before,
input[type="radio"] + label:before {
	background-image: url("/wp-content/uploads/radio-unchecked.svg")
}
input[type="checkbox"]:checked + span:before,
input[type="checkbox"]:checked + label:before {
	background-image: url("/wp-content/uploads/checkbox-checked.svg")
}
input[type="radio"]:checked + span:before,
input[type="radio"]:checked + label:before {
	background-image: url("/wp-content/uploads/radio-checked.svg")
}

Вставляем в стили темы, загружаем изображения чекбоксов и радио-кнопок, меняем пути к файлам и всё сразу работает.

Кстати, эти стили будут работать и для формы комментариев WordPress, и в форме оформления заказа Woocommerce. Хотя, конечно же, могут быть варианты в зависимости от используемой темы.

C галочкой принятия (acceptance) эти стили без небольшого танца не сработают. Чтобы и там чекбокс был красивый, идём в редактор плагинов. Нас интересует файл modules/acceptance.php. Находим в нём 93 строку и добавляем пустой тег <span></span> после input’а. Вот так:

} else {
	$html = sprintf(
		'<span class="wpcf7-list-item"><input %1$s /><span></span></span>',
	$item_atts );
}

Это нужно для того, чтобы стилям было за что зацепиться. В противном случае чекбокс будет скрыт. Единственный минус, что после обновления плагина этот тег придётся добавлять снова.

Ссылка на архив с чекбоксами и радиокнопками как на картинке в начале статьи.

Я стараюсь для подобных мелких элементов использовать векторный svg. Он легче, быстрее грузится и, что самое удобное — не подвержен искажениям, как растровые изображения.

Если ваш WordPress ругается на формат, добавьте в wp-config.php строку:

define( 'ALLOW_UNFILTERED_UPLOADS', true );

Либо можете использовать один из плагинов, позволяющий загружать svg в библиотеку. Или вовсе положить файлы в удобную папку на сервере и указать путь к ней.

Изменить цвет иконок вы можете в Adobe Illustrator. Либо можете скачать любые другие. Например, на Flaticon или Icon8. Там, кстати, и цвет можно сразу задать такой, какой вам нужен.

Успехов!

Вход