03.04.2019
Изменение внешнего вида для чекбокса с помощью CSS
HTML для чекбокса или радио-кнопок
<label class="input-wrap">One <input type="radio" checked="checked" name="radio"> <span class="checkmark"></span> </label> <label class="input-wrap">Two <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="input-wrap">Three <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="input-wrap">Four <input type="radio" name="radio"> <span class="checkmark"></span> </label>
CSS для чекбокса
/* Customize the label (the container) */ .input-wrap { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .input-wrap input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* On mouse-over, add a grey background color */ .input-wrap:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .input-wrap input:checked ~ .checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .input-wrap input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .input-wrap .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
Пример обновленного дизайна для чекбокса
See the Pen Customize Checkboxes by CSS by Denis (@deniscreative) on CodePen.default
Изменение внешнего вида для радио-кнопок с помощью CSS
CSS для радио-кнопок
/* Customize the label (the container) */ .input-wrap { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .input-wrap input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom radio button */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } /* On mouse-over, add a grey background color */ .input-wrap:hover input ~ .checkmark { background-color: #ccc; } /* When the radio button is checked, add a blue background */ .input-wrap input:checked ~ .checkmark { background-color: #2196F3; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .input-wrap input:checked ~ .checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .input-wrap .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; }
Пример обновленного дизайна для радио-кнопок
See the Pen Customize Radio buttons by CSS by Denis (@deniscreative) on CodePen.0
Комментарии (4) к “Изменение внешнего вида чекбоксов и радио-кнопок с помощью CSS”
Vital
используется — кривое решение.
уже давно есть методы, обходящиеся только двумя элементами: label & input
Vital
у вас ещё и парсер кривой — съел “SPAN”.
если в тексте встречается тэг, так меняйте скобочки на lt & gt, а не тупо удаляйте текст.
читать надо “используется SPAN — кривое решение.”
Denis Creative
Уже года 3 хочу поменять данный шаблон из-за кучи проблем с ним, но не доходят руки.
Спасибо за сообщение, постараюсь устранить данную проблему в ближайшее время.
Denis Creative
Можете привести пример стилизации чекбоксов без дополнительных элементов в коде?
Желательно, чтобы дизайн был похож на данный пример.