Время для прочтения: 2 мин. 31 сек.

«Дедовский» способ кастомизации чекбоксов и радиокнопок на CSS

Теме кастомизации стандартных контроллов (радиокнопок и чекбоксов) посвящено огромное количество статей, но все они сводятся к подключению ненужных jQuery-плагинов, роль которых - полная замена нативных checkbox и radio на смесь непонятных структур HTML и JavaScript.

Я, обычно, пользуюсь «дедовским» способом, не ломающим стандартное поведение контроллов, не использующим ни капли JavaScript — только чистый CSS3.

Тут главное соблюдать структуру, чтобы работали соседние селекторы в CSS.

Структура HTML:


<div class="checkbox">
	<input type="checkbox" id="foo-1" hidden />
	<label for="foo-1">обычный чекбокс</label>
</div>
<div class="checkbox">
	<input type="checkbox" id="foo-2" checked hidden />
	<label for="foo-2">отмеченный чекбокс</label>
</div>

Все пояснения есть в CSS-коде, если что-то не понятно — пишите в комментах, разберемся вместе.

Листинг CSS:


.checkbox,
.radio {
	position: relative;
}
/**
 * подгоняем размер чекбокса/радиокнопки под картинку,
 * обнуляем отступы, вешаем поверх всего и скрываем
 */   
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
	position: absolute; 
	width: 35px;
	height: 23px;  
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	opacity: 0;
}
/**
 * Освобождаем место под картинку
 */
.checkbox input[type="checkbox"] + label,
.radio input[type="radio"] + label {
  position: relative;
  padding-left: 45px;
  display: block;
  cursor: pointer;	
}
/**
 * Вставляем пустой блок с картинкой
 */
.checkbox input[type="checkbox"] + label:before,
.radio input[type="radio"] + label:before {
  display: block;
  width: 35px;
  height: 23px;
  background: url('../images/sprites/forms.png');
  content: " ";
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 0;
}
/**
 * Позиционируем фоновую картинку в
 * зависимости от состояния контролла
 */
.radio input[type="radio"] + label:before {
  background-position: -35px 0;
}
.radio input[type="radio"]:checked + label:before {
  background-position: 0 0;
}
.checkbox input[type="checkbox"] + label:before {
  background-position: -35px 0;
}
.checkbox input[type="checkbox"]:checked + label:before {
  background-position: 0 0;
}

По аналогии можно добавить обработку состояний контроллов hover и focus.

Поддежка браузерами

Судя по данным о поддержке CSS3 в браузерах — это: IE9+, FF 3.5, Chrome 4, Safari 3.2.

Живой пример

0

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Демку бы с кодом выложил бы в песочницу куда-нибудь. Чтобы можно было посмотреть и потрогать.

    • Так внизу статьи раздел «живой пример» с codepen.io. Или мы о разном говорим?

      • норм, плагин iframe вырезал с другого домена.

        • Я уж было испугался, проверил и мобильную версию и на планшете)