Главная › CSS-верстка

Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров

105 комментариев

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные ...

Смотрите также

jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

2614 комментариев

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация ...

Верстка красивых тегов для сайта + бонус

25 комментариев

Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить ...

Зеленый свет CSS-свойствам при верстке под IE8 и выше

26 комментариев

Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...

jQuery-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...

Комментарии (105)

  1. Сергей
    7 лет 7 месяцев назад 
    /* Показываем получение фокуса. */
.checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}

    Не вижу, что тут происходит, что это за тень? Поясните пожалуйста!
    А за решение спасибо!

  2. Мой Хозяин
    7 лет 7 месяцев назад

    Здравствуйте и все-таки как сделать для радио кнопки?

  3. Михаил
    7 лет 6 месяцев назад

    Здравствуйте. Если обновить станицу, то все чекбоксы (выбранные) остаются в состание чекет. Что можно с эти сделать?

  4. RiA
    7 лет 6 месяцев назад

    Здравствуйте, подскажите пожалуйста в чем может быть проблема?: стоит фильтр характеристик на сайте, при нажатии на любой фильтр — работает только самый верхний чекбокс (только самая первая характеристика — все остальные не подвижны)

  5. Роман
    7 лет 5 месяцев назад

    Когда клацаю по чекбоксу, текст сползает постепенно вниз.

  6. Артем
    7 лет 5 месяцев назад

    Ничего не работает в мозиле и в хроме пробовал не пашет как было так и осталось!

  7. Никита
    7 лет 4 месяца назад

    Всё прекрасно работает. Автору спасибо)

  8. PuNKeR
    7 лет 2 месяца назад

    Подскажите, а как сделать, чтобы label был с левой стороны?

  9. Дмитрий
    7 лет 2 месяца назад

    Спасибо, очень полезно

  10. Алексей
    7 лет назад

    Доброго времени суток!
    Спасибо за отличную статью.
    Небольшое дополнение: в хроме может не срабатывать стиль checkbox: checked + label: after
    Что бы исправить это нужно поместить чекбокс в div:
    checkbox

  11. webdizcomua
    7 лет -1 месяц назад

    Классная статья о таком способе я еще не знал

  12. xxxLOGIATxxx
    6 лет 10 месяцев назад

    Слишком большая зависимость от тега label. Например в Drupal 8 эти два элемента периодически отображаются в таблицах, причём в разных столбцах, что делает этот код неюзабельным, поскольку ячейка таблицы останется пустой. Попробую Ваш js вариант. А статья хорошая и доходчивая.

  13. Николай
    6 лет 8 месяцев назад

    Спасибо, страница в закладках, очень часто возвращаюсь сюда, от себя добавлю в sass тот же код (без выделения фокусом):

    .checkbox{
		vertical-align: top;
	    margin: 0 3px 0 0;
	    width: 17px;
	    height: 17px;
		&amp; + label{
			cursor: pointer;
		}
		&amp;:not(checked){
			position: relative;
  			padding: 0 0 0 60px;
			&amp; + label::before{
				content: '';
				position: absolute;
				top: -4px;
				left: 0;
				width: 50px;
				height: 26px;
				border-radius: 13px;
				background: #CDD1DA;
				box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
			}
			&amp; + label::after{
				content: '';
				position: absolute;
				top: -2px;
				left: 2px;
				width: 22px;
				height: 22px;
				border-radius: 10px;
				background: #FFF;
				box-shadow: 0 2px 5px rgba(0,0,0,.3);
				transition: all .2s;
			}
		}
		&amp;:checked{
			&amp; + label::before{
				background: #9FD468;
			}
			&amp; + label::after{
				left: 26px;
			}
		}

	}
  14. Iryna
    6 лет 7 месяцев назад

    Спасибо большое.
    Очередной раз пришла подглядеть код и стало даже стыдно, что до сих пор не поблагодарила автора. Огромное-огромное спасибо!!!)

  15. Николай
    6 лет 7 месяцев назад

    А как в этом красивом стиле достучаться хотя бы до value радиобаттонов?
    У меня даже простой сумматор чекнутых радио с ними не срабатывает (

    <form>

<input class="radio" id="radio-1" name="radio" type="radio" value="1">
<label for="radio-1">111</label>

<input class="radio" id="radio-2" name="radio" type="radio" value="2">
<label for="radio-2">222</label>

<input class="radio" id="radio-3" name="radio" type="radio" value="3">
<label for="radio-3">333</label>

<input class="radio" id="radio-4" name="radio" type="radio" value="4">
<label for="radio-4">444</label>

 <input type="button" value="Подсчитать">
 <br>Сумма:
 <input type="text" name="sumOut" disabled="false" value="">

</form>


<script>
window.onload = function() {
  document.forms.formText.onclick = function() {
    var sum = 0,
      els = this.querySelectorAll('input[type="radio"]:checked');
    for (var i = 0; i < els.length; i++) {
      sum += +els[i].value;
    }
    this.sumOut.value = sum;
  };
};
</script>
  16. Владимир
    6 лет 5 месяцев назад

    Я только не понял почему когда мы стилизуем: not (checked), то инпут стилизуется не только в «невыбранном» состоянии, но в выбранном. Объясните пожалуйста

  17. Vasya Pupkin
    6 лет 4 месяца назад

    Себя же и поправил

    .checkbox:disabled + label: before {
    background: #ccc;
    }
    .radio:disabled + label: before {
    background: #eee;
    }
    .radio:disabled:checked + label: after {
    background: #ccc;
    }

    Обнови стили, Людям будет проще копитырить.

  18. Дмитрий
    6 лет 3 месяца назад

    Здравствуйте! скажите пожалуйста, мне надо в label: before при. checkbox:checked вставить svg иконку «галочку». Пишу. chekbox:checked+label:before{ display: block; background: url (./icons/check.svg) no-repeat center } и ничего не работает. только если в content «» вставляю fontawesome, то работает, а мне нужно вставить svg иконку. как это решить?

  19. Unknow Coder
    6 лет 2 месяца назад

    для radio и checkbox можно более легкое решение — без: not-ов!

    /*HTML*/


/*CSS*/

input[type="radio"] {
	display: none;
}

label {
	position: relative;
	
	margin-bottom: 23px;
	padding-left: 62px;
	
	line-height: 42px;
}

label::before {
	content: "";
	position: absolute;
	// top: -17px;
	left: 0;
	
	width: 42px;
	height: 42px;
	
	border: 3px solid #666666;
	border-radius: 50%;
}

input[type="radio"]:checked + span::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 13px;
	
	width: 16px;
	height: 16px;
	
	background: aqua;
	border: 3px solid aqua;
	border-radius: 50%;
}
    • Dimox
      6 лет 2 месяца назад / ответ на коммент Unknow Coder

      :not нужен для обратной совместимости старых браузеров, но я на практики его уже не использую. Пора, наверное, обновить статью и убрать его.

      • qashqir
        6 лет 1 месяц назад / ответ на коммент Dimox

        Обновить давно пора
        Вот, к примеру, такие-же чекбокс и радиокнопка:

        
/*---------------------------Checkbox-------------------------*/

	input[type="checkbox"]{
	display:block;
	position:relative;
	top:26px;
	left:445px;
	width:50px;
	height:26px;
	background:#ccd1da;
	box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
	border-radius:13px;
	-webkit-appearance: none;
	outline:none;
	cursor:pointer;
	transition:all .3s;
}
input[type="checkbox"]:after{
	display:block;
	content:'';
	position:relative;
	top:2px;
	left:2px;
	width:22px;
	height:22px;
	border-radius:11px;
	background:#fafafa;
	box-shadow:0 2px 5px rgba(0,0,0,.3);
}
input[type="checkbox"]:checked {
	padding-left:24px;
	background:#509cba;
}

/*---------------------------Radio---------------------------*/

input[type="radio"]{
	display:inline-block;
	position:relative;
	top:3px;
	height:16px;
	width:16px;
	margin-left:30px;
	margin-right:15px;
	background-color:#cdd1da;
	border:1px solid #bbb;
	border-radius:50%;
	cursor:pointer;
	-webkit-appearance:none;
	outline:none;
}

input[type="radio"]:after{
	display:block;
	content:'';
	position:relative;
	top:2px;
	left:2px;
	height:10px;
	width:10px;
	background-color:transparent;
	border-radius:50%;
}

input[type="radio"]:checked:after{
	box-shadow:inset 0 1px 1px rgba(0,0,0,.3);
	background-color:#509cba;
	transition:all .3s
}
  20. Unknow Coder
    6 лет 2 месяца назад

    так даже более симантично так как input в label лежит и for не нужен), но автору респект за содержательную статью!

Ваш комментарий