«Дедовский» способ кастомизации чекбоксов и радиокнопок на 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.
Живой пример
See the Pen RNGBzz by mihdan (@mihdan) on CodePen.
Демку бы с кодом выложил бы в песочницу куда-нибудь. Чтобы можно было посмотреть и потрогать.
Так внизу статьи раздел «живой пример» с codepen.io. Или мы о разном говорим?
норм, плагин iframe вырезал с другого домена.
Я уж было испугался, проверил и мобильную версию и на планшете)
You a cool writer and this is a cool article, but can you please change the picture which representing your article, it hurts my child psyche and feelings )))
This is the whole message of the article.
я бы почитала статью, но картинка вверху испортила всё настроение. А почему бы жопу мужика с яйцами туда не поставить? пойду почитаю где-нибудь в другом месте/
Ну если информация вам бы была нужна — почитатали бы, картинка тут каким боком? Можно и мужика с яйцами — жду от вас фото. Эксей, к сожелению, не фотографирует мужчин. Ханжество в интернете — звучит дико. Спасибо. Удачи!
Я тоже не прочел статью — залюбовался картинкой! 😉
Действительно, как Вам подсказывают, добавьте какую-то демку)) Чтобы мы могли протестировать, то есть пощупать и потрогать ваше творение!))
В самом низу статьи в разделе «Живой пример» вставлен пример с CodePen )))