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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .checkbox{
    		vertical-align: top;
    	    margin: 0 3px 0 0;
    	    width: 17px;
    	    height: 17px;
    		& + label{
    			cursor: pointer;
    		}
    		&:not(checked){
    			position: relative;
      			padding: 0 0 0 60px;
    			& + 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);
    			}
    			& + 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;
    			}
    		}
    		&:checked{
    			& + label::before{
    				background: #9FD468;
    			}
    			& + label::after{
    				left: 26px;
    			}
    		}
    
    	}
    
    
  14. Спасибо большое.
    Очередной раз пришла подглядеть код и стало даже стыдно, что до сих пор не поблагодарила автора. Огромное-огромное спасибо!!!)

  15. А как в этом красивом стиле достучаться хотя бы до 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. Я только не понял почему когда мы стилизуем: not (checked), то инпут стилизуется не только в «невыбранном» состоянии, но в выбранном. Объясните пожалуйста

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

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

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

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

  19. для 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%;
    }
    
    • :not нужен для обратной совместимости старых браузеров, но я на практики его уже не использую. Пора, наверное, обновить статью и убрать его.

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

        
        /*---------------------------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. так даже более симантично так как input в label лежит и for не нужен), но автору респект за содержательную статью!

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