WEB лаборатория DLE » Другое для WEB » Разное и другое » Стилизуем чекбоксы и радио кнопки с CSS3
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 4
    Пользователей: 0
    Гостей: 4


    Последние комментарии
    ...
    HI-tech:
    0

    Стилизуем чекбоксы и радио кнопки с CSS3

    Стилизуем чекбоксы и радио кнопки с CSS3


    Благодаря CSS3, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.

    Существует 2 типа элементов форм, которые очень трудно стилизовать под себя (особенно задать один стиль для всех платформ) - Windows, OS X, Linux по-своему отображают данные элементы.

    Стилизуем чекбоксы и радио кнопки с CSS3


    Итак, начинаем!

    HTML код
    начнём мы с создания html документа со следующей структурой:

    Радио кнопки
    <div class="radio">
    	<input id="male" type="radio" name="gender" value="male">
    	<label for="male">Male</label>
    	<input id="female" type="radio" name="gender" value="female">
    	<label for="female">Female</label>
    </div>

    Чекбоксы
    <div class="checkbox">
    	<input id="check1" type="checkbox" name="check" value="check1">
    	<label for="check1">Checkbox No. 1</label>
    	<br>
    	<input id="check2" type="checkbox" name="check" value="check2">
    	<label for="check2">Checkbox No. 2</label>
    </div>

    CSS
    С html структурой мы закончили. Теперь давайте посмотрим, каким образом мы можем стилизовать элементы . Первым делом возьмёмся за радио элементы. Отображение позаимствуем с дизайна OS:
    Стилизуем чекбоксы и радио кнопки с CSS3


    Стилизуем радо кнопки
    В первую очередь, мы меняем иконку курсора на pointer (появляется рука с пальцем), для того чтобы пользователь понимал, что данный элемент кликабилен:
    label {
    	display: inline-block;
    	cursor: pointer;
    	position: relative;
    	padding-left: 25px;
    	margin-right: 15px;
    	font-size: 13px;
    }

    Затем спрячем радио кнопку по её атрибуту:
    input[type=radio] {
    	display: none;
    }

    Заменяем скрытый элемент псевдо классом :before.
    label:before {
    	content: "";
    	display: inline-block;
    
    	width: 16px;
    	height: 16px;
    
    	margin-right: 10px;
    	position: absolute;
    	left: 0;
    	bottom: 1px;
    	background-color: #aaa;
    	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    }

    Такой же стиль мы применим и к чекбоксу. Разница только в том, что для радио кнопки нам нужно сформировать окружность. Добиться подобного эффекта мы можем, воспользовавшись border-radius и задав радиус в половину ширины и высоты элемента.
    .radio label:before {
    	border-radius: 8px;
    }
    

    На данном этапе наши элементы должны выглядеть вот так:
    Стилизуем чекбоксы и радио кнопки с CSS3


    Теперь нам нужно добавить мелкие кружочки в основной круг при клике по кнопке. Для этого воспользуемся псевдо-элементом CSS3 :checked, и в качестве контента запишем HTML символ круга • •, но для того чтобы всё отображалось так, как нам нужно, данное значение нужно преобразовать для CSS. Для этого можем воспользоваться сервисом Entity Conversion Tool
    input[type=radio]:checked + label:before {
        content: "\2022";
        color: #f3f3f3;
        font-size: 30px;
        text-align: center;
        line-height: 18px;
    }

    Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.
    Стилизуем чекбоксы и радио кнопки с CSS3


    Стилизуем чекбоксы
    Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:
    input[type=checkbox] {
    	display: none;
    }

    Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента :before, просто добавим рамку:
    .checkbox label:before {
    	border-radius: 3px;
    }

    Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радо кругом. На этот раз нам понадобится преобразовать HTML символ ? ✓.
    input[type=checkbox]:checked + label:before {
    	content: "\2713";
    	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    	font-size: 15px;
    	color: #f3f3f3;
    	text-align: center;
        line-height: 15px;
    }

    В итоге, вот что у нас должно получиться:
    Стилизуем чекбоксы и радио кнопки с CSS3


    Итоги
    В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали CSS3, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим jQuery плагином.



    Теги: CSS3, чекбокс, радио кнопка

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.