Сегодня пойдет речь о замене стандартных галочек у опций на стильные красивые кнопки. Кнопки работают отлично, плавно переключают, они выполняют такой-же функционал как и галочки, это новый вид для вашего сайта.
Цвет кнопок можно настроить под себя, всё работает на стиле CSS. Кнопки будут заменены везде, где присутствуют галочки.
В Таблицу стилей (CSS) вставляем:
Код
input[type=checkbox]:not(checked),input[type=radio]:not(checked){position:absolute;opacity:0;}
input [type=checkbox]{vertical-align: top;width: 17px;height: 17px;margin: 0 3px 0 0;}
input [type=checkbox]+ label {cursor: pointer;}
input[type=checkbox]:not(checked) {position: absolute;opacity: 0;}
input[type=checkbox]:not(checked) + label {position: relative;padding: 0 0 0 60px;}
input[type=checkbox]:not(checked) + label:before {content: '';position: absolute;top: -3px;left: 0;width: 34px;height: 18px;border-radius: 13px;background: #424242;box-shadow: inset 0 2px 3px rgba(0,0,0,.2);}
input[type=checkbox]:not(checked) + label:after {content: '';position: absolute;top: 0px;left: 3px;width: 12px;height: 12px;border-radius: 10px;background: #ffffff;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: all 0.3s;}
input[type=checkbox]:checked + label:before {background: #ff673d;}
input[type=checkbox]:checked + label:after {left: 18px;}
input[type=checkbox]:focus + label:before {box-shadow: 0 0 0 3px rgba(255, 255, 0, 0);}
input [type=radio]{vertical-align: top;width: 17px;height: 17px;margin: 0 3px 0 0;}
input [type=radio]+ label {cursor: pointer;}
input[type=radio]:not(checked) {position: absolute;opacity: 0;}
input[type=radio]:not(checked) + label {position: relative;padding: 0 0 0 35px;}
input[type=radio]:not(checked) + label:before {content: '';position: absolute;top: -1px;left: 8px;width: 12px;height: 12px;border: 1px solid #6d6d6d;border-radius: 50%;background: #b7b7b7;}
input[type=radio]:not(checked) + label:after {content: '';position: absolute;top: 3px;left: 12px;width: 6px;height: 6px;border-radius: 50%;background: #ff673d;box-shadow: inset 0 1px 1px rgba(0,0,0,.5);opacity: 0;transition: all .2s;}
input[type=radio]:checked + label:after {opacity: 1;}
input[type=radio]:focus + label:before {box-shadow: 0 0 0 3px rgba(29, 29, 29, 0);}
label {line-height:30px;}
