Стилизация checkbox

Стилизация checkbox

От автора: приветствую вас, друзья. Создавая формы на сайте, мы неоднократно работаем с таким элементом формы, как checkbox, который позволяет отметить галочкой некий пункт формы. По умолчанию чекбокс выглядит весьма обыденно, однако есть возможность его оформить. Давайте посмотрим, как можно стилизовать checkbox и оформить его весьма привлекательным образом.

Исходные файлы текущей статьи вы можете скачать по ссылке.

Итак, перед нами есть простая форма авторизации, в которой имеется поле checkbox для запоминания пользователя (код формы вы найдете в исходниках).

Мы получили стандартный чекбокс. Давайте попробуем изменить его вид. Для этого воспользуемся плагином Bootstrap-checkbox. Скачаем и установим плагин, подключив файл bootstrap-checkbox.min.js:

<script src="bootstrap-checkbox/dist/js/bootstrap-checkbox.min.js"></script>

Для инициализации плагина достаточно вызвать его метод checkboxpicker() для конкретного чекбокса или для всех чекбоксов в коде. Давайте вызовем для чекбокса с конкретным идентификатором:

$(function(){
	$('#remember').checkboxpicker();
});

Разметка чекбокса при этом должна быть примерно следующей:

<input type="checkbox" name="remember" id="remember"> Запомнить?

Помещать чекбокс в тег label не рекомендуется. Вот что мы получим в результате:

Оригинальный переключатель вместо однотипного чекбокса, не так ли? Ну а с помощью опций, которые можно передать в метод плагина, мы имеем возможность произвести стилизацию переключателя checkbox. Например, строки No и Yes мы можем заменить на иконки:

$(function(){
	$('#remember').checkboxpicker({
		html: true,
		offLabel: '<span class="glyphicon glyphicon-thumbs-down">',
  		onLabel: '<span class="glyphicon glyphicon-thumbs-up">'
	});
});

Или более подходящие иконки:

$(function(){
	$('#remember').checkboxpicker({
		html: true,
		offLabel: '<span class="glyphicon glyphicon-remove">',
  		onLabel: '<span class="glyphicon glyphicon-ok">'
	});
});

Гораздо более красивый и информативный переключатель, на мой взгляд. Ну а на этом текущую статью мы завершаем. Дополнительно по работе с формами вы можете посмотреть этот урок. Удачи!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree