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

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

Честно говоря, я «слегка» припозднился с данной статьей, т.к. то, что в ней изложено, можно было применять на практике уже довольно давно. Но лучше поздно, чем никогда, тем более, что я уверен, что среди моих читателей найдутся и те, кто не пользуется этим ...

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

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

  2. 9
    Мой Хозяин

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

  3. 11
    Михаил

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

  4. 13
    RiA

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

  5. 14
    Роман

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

  6. 15
    Артем

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

  7. 16
    Никита

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

  8. 17
    PuNKeR

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

  9. 18
    Дмитрий

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

  10. 19
    Алексей

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

  11. 21

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

  12. 22
    xxxLOGIATxxx

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

  13. 23
    Николай

    Спасибо, страница в закладках, очень часто возвращаюсь сюда, от себя добавлю в 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. 24
    Iryna

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

  15. 25
    Николай

    А как в этом красивом стиле достучаться хотя бы до 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. 27

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

  17. 31
    Vasya Pupkin

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

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

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

  18. 32
    Дмитрий
    @

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

  19. 34
    Unknow Coder

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

    /*HTML*/
    <label><input type="radio"><span></span></label>
    
    /*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%;
    }
    
    • 35

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

      • 36
        qashqir
        @

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

        
        /*---------------------------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. 39
    Unknow Coder

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

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