• Free consultations 24/7
  • Иконка телефона +1 (310) 933-4443
    Поддержка: Онлайн

    Ждем вашего звонка :)

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

    Поддержка: Офлайн

    Будем онлайн через: 2h 34 min

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

Стилизация чекбоксов (Checkboxes) и радиокнопок (Radio Buttons) средствами CSS.

В этой статье мы попытаемся показать и рассказать о том, как можно провести стайлинг Checkbox (называемый также «флажком» или «галочкой») и Radio Buttons на вашем сайте без использования JavaScript. Это возможно благодаря CSS.

 

 

Шаг 1. Общие сведения о процессе.

Если вы достигли многого в области CSS и просто хотите получить толчок в нужном направлении, из всего туториала вас могут заинтересовать эти две строки:

001 input[type=»checkbox»]:checked + label {

002 }

Обратите внимание, что в данном теге в CSS3 используется псевдоселектор :cheked. Он позволяет выделить элементы, которые отмечены. Также можно использовать рядом с селектором “+”, что отсылает нас к CSS2.

Шаг 2. Настройка HTML.

Теперь переходим к созданию HTML и CSS файлов. Обратите внимание, что техника для стилизации чекбоксов и радиокнопок в принципе одинакова. Попробуем поработать над «флажками» с помощью тегов input и label.

<input type=»checkbox» />

<label>Styled Check Box</label>

Вы должны прописать тег input для того, чтобы пользователь мог взаимодействовать с кнопкой или флажком. Также это можно сделать, используя элемент =” ” или ID.

<input type=»checkbox» id=»c1″ name=»cc» />

<label for=»c1″>Check Box 1</label>

Шаг 3. CSS.

Начинается самое интересное. В этом отрывке видно, как скрыть собственно «флажок».

input[type="checkbox"] {
    display:none;
}

Теперь, когда это сделано, можно поменять и сам стиль, задавая при этом конкретные диапазоны внутри тега label. Нужно сделать это таким образом, чтобы была возможность точно контролировать положение «флажка», ведь на фоне его не видно.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Обратите внимание и на другой отрывок кода – здесь уже вы можете экспериментировать со своей эстетикой и исходя из своего вкуса или общего дизайна.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

 

Экспериментируйте с разными стилями и дизайнами. Необходимо также отметить, что возможности селектора :checked выходят далеко за рамки использования при разработке флажков.

Posted on 14.10.2012

Category: Разработка (html5, css и т.п.)

Article tags

Вы дизайнер?

Join Us

всего в сообществе

~150.1k дизайнеров


Related Articles

Стоит переходить на Photoshop CS6 ?(Часть 2)

Разработка (html5, css и т.п.)

В этой статьи мы продолжим рассматривать новые функции и достоинства нового  Photoshop CS6. ФИЛЬТР...

Скевоморфизм в дизайне интерфейса

Разработка (html5, css и т.п.)

Что же означает этот странный термин и как он используется в дизайне интерфейса? Википедия...