Делаем красивые чекбоксы
Пример реализации красивого чекбокса вместо стандартного. Это простой пример, а визуально оформить сам чекбокс каждый уже сможет сам, этот код просто для развития идеи.
HTML
<h1>What is your favorite car?</h1> <form> <div class="answer_box"> <input type="checkbox" id="Mazda"> <label for="Mazda">Mazda</label> </div> <div class="answer_box"> <input type="checkbox" id="Toyota"> <label for="Toyota">Toyota</label> </div> <div class="answer_box"> <input type="checkbox" id="Honda"> <label for="Honda">Honda</label> </div> <div class="answer_box"> <input type="checkbox" id="BMW"> <label for="BMW">BMW</label> </div> <div class="answer_box"> <input type="checkbox" id="Mercedes"> <label for="Mercedes">Mercedes</label> </div> </form>
CSS
.answer_box { padding-left: 40px; position: relative; cursor: pointer; font-size: 24px; line-height: 32px; margin-bottom: 10px; } .answer_box input, .answer_box label { cursor: pointer; } .answer_box input[type="checkbox"]{ display: none; } .answer_box:after { content: ''; position: absolute; left: 0; top: 6px; display: block; width: 23px; height: 20px; box-sizing: border-box; background: url(images/check.png) 0 -20px no-repeat; border-radius: 4px; } .answer_box.checked:after{ background: url(images/check.png) 0 0 no-repeat; }
IMG
JS
$(document).ready(function(){ $('.answer_box').click(function(e) { // добавляем класс блоку, чтобы сделать красивый чекбокс $(this).toggleClass('checked'); // если данные чекбокса нам нужны при отправке формы, то отмечаем и сам чекбокс if ($('input', this).is(':checked')) $('input', this).prop('checked', false); else $('input', this).prop('checked', true); e.preventDefault(); }); });
Screenshot
Рабочий пример
See the Pen nice checkbox by Denis (@deniscreative) on CodePen.0
Вариант №2 — Стилизуем радио-кнопки и используем только CSS
input[type=radio]:not(old){ display: none; } input[type=radio]:not(old) + label{ display: inline-block; line-height: 36px; font-size: 12px; color: #34495e; cursor: pointer; margin-bottom: 10px; } input[type=radio]:not(old) + label:before{ content: ""; display: inline-block; background: url(images/check.png) 0 0 no-repeat; width: 36px; height: 36px; vertical-align: middle; margin-right: 14px; } input[type=radio]:not(old):checked + label:before{ background-position: 0 -36px; }
Используем такую картинку для чекбокса
Получаем такой внешний вид:
Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому…
Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….
В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…
Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один…