Товаров: 0 (0р.)

Радиокнопки css: Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

Содержание

Красивые чекбоксы и радиокнопки на CSS3 без JavaScript / Хабр

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

Демонстрация Скачать исходники

Для начала сделаем простой checkbox:

<input type="checkbox" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

Теперь необходимо спрятать чекбокс и использовать спрайты для отображения отмеченного чекбокса/радиокнопки:

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;
}

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

 
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;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Поддержка браузерами


Псевдоклассы, в частности используемый :checked, отлично работают в большинстве браузеров, за исключением Internet Explorer 9 (и ниже) и Safari в iOS ниже 6-ой версии. Вот так наша форма отображается в IE:

Пост написан по мотивам урока на tutplus.com Quick Tip: Easy CSS3 Checkboxes and Radio Buttons.

Стилизация radio на CSS

Вы здесь: Главная — CSS — CSS3 — Стилизация radio на CSS

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

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

HTML код

Атрибут for у тега label устанавливает связь с

input через id, в том случае если, input не вложен в label. Значения у for и id, должны быть одинаковыми. В нашем примере, у первой связки – honda, а у второй renault. Когда пользователь должен выбрать только один вариант, следует прописать обоим инпутам, атрибут name с одинаковым значением (car). Атрибут type указывает, что инпут надо отобразить, как radio кнопку (круглым).

Обернем первую связку input+label в div с классом radio, то же самое сделаем для второй связки. Присвоим так же классы input и label, для их дальнейшей стилизации.

<div>
    <input name="car" type="radio">
    <label for="honda">Honda</label>
</div>
<div>
    <input name="car" type="radio">
    <label for="renault">Renault</label>
</div>

По умолчанию, браузер отобразит любой элемент формы. На картинке ниже, вы можете увидеть наши radio, без CSS стилей.

Скажем спасибо браузеру и погрузимся в CSS код для стилизации radio кнопок.

CSS-код

Вложенные теги input+label, позиционируем относительно родителя –

div с классом radio.

.radio {
    position: relative;
    margin-bottom: 1rem;
}

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

.radio_input {
    -webkit-appearance: none;/* Chrome */
    -moz-appearance: none;/* Firefox */
    appearance: none;/* убираем стандартные кружочки */
    position: absolute;
}

Стилизуем текст внутри тега label.

.radio_label {
    padding-left: 25px;/* отступ слева */
    font-size: 1rem;
    color: #444;
    cursor: pointer; /* курсор рука */
}

Создадим два состояния radio кнопок, с помощью псевдоэлементов before+after. Стилизуем before, как пустой белый кружок, after – кружок с цветным фоном, изображающий отмеченное состояние. На деле, круг с меньшим диаметром after, будет находиться внутри круга с большим диаметром before.

Стилизуем псевдоэлемент before

.radio_label:before {
    content: "";
    display: block; /* не в строку */
    width: 16px; /* ширина блока */
    height: 16px;/* высота блока */
    border: 1px solid #ccc;/* рамка */
    background-color: #fff; /* цвет фона */
    border-radius: 50%;/* получаем круг */
    position: absolute;/* расположен точно в родителе */
    top: 0; /* расстояние от верха родителя */
    left: 0;/* расстояние слева от родителя */
    z-index: 1; /* на нижнем слое */
    transition: border .1s linear;/* плавный переход для border */
}

Стилизуем псевдоэлемент after

.radio_label:after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-color: #49d120;
    border-radius: 50%;
    opacity: 0; /* полностью прозрачный */
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 2;/* на верхнем слое */
    transition: opacity .1s linear; /* плавный переход для opacity */
}

Нам, нужно менять вид кружка, только при отмеченном состоянии (checked). Когда пользователь кликает в поле input, рамка у before меняет свой цвет.

.radio_input:checked + .radio_label:before {
    border-color: #319612;
}

А у after, прозрачный фон, становится непрозрачным, кружок окрашивается в зеленый цвет.

.radio_input:checked + .radio_label:after {
    opacity: 1;
}

Таким образом, в неотмеченном состоянии, поле input – белое. А в отмеченном состоянии – зелёное. Мы получили стилизованные radio кнопки на чистом CSS.

Демонстрация примера

  • Создано 24.05.2019 10:19:43
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья

ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Переключатели | htmlbook.ru

Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.

 
<input type="radio" name="имя" атрибуты>

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей
АтрибутОписание
checkedПредварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
nameИмя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
valueЗадаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатели</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Какое у вас состояние разума?</b></p>
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p>
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p>
    <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p>
    <p><input type="submit" value="Выбрать"></p>
  </form> 
 </body>
</html>

В результате получим следующее (рис. 1).

Рис. 1. Вид переключателей в браузере

Заметьте, что в данном примере значение атрибута name для всех переключателей одинаково, именно в таком случае браузер понимает, что переключатели связаны между собой и помечает только один пункт из предложенных. Значение атрибута value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.

Переключатели-флажки и радиокнопки на CSS3

Можно задавать стили элементам разными способами при помощи CSS. Но с элементами форм все не так просто. Легко задать стили с помощью CSS текстовым полям ввода, а для переключателей-флажков и радиокнопок сделать это очень сложно. В этом уроке мы покажем, каким способом можно задать стили этим элементам и сделать их привлекательными, используя только CSS.

 

 

Демонстрация работы – Скачать исходный код

Основы 

Хорошей идеей для задания стилей переключателям-флажкам, радиокнопкам и выпадающим меню является обращение к их подписи или тегу span.

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

Этот способ работает во всех современных браузерах, таких как Internet Explorer, Firefox, Opera и Chrome.

Чем можно воспользоваться 

Так чем же можно воспользоваться, чтобы создать нужные эффекты? Мы можем использовать псевдоклассы :after, :before, чтобы не пришлось добавлять еще больше  кода HTML. А для радиокнопок и переключателей-флажков можно использовать псевдокласс :checked. Еще можно использовать и другие псевдоклассы, такие как :hover и :active.

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

Начнем 

Для начала давайте создадим несколько переключателей-флажков и радиокнопок. Мы создадим по два вида этих элементов форм: один маленький и другой большой. Но кроме элементов ввода с типами, идентификаторами, именами и классами нам понадобится подпись, расположенная после каждого элемента ввода. После это мы воспользуемся атрибутом for для того, чтобы связать каждую подпись с соответствующим элементом ввода. Код HTML будет таким:

<div>
		<label>Checkbox Small</label>
		<input type="checkbox" />
		<nput type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
	</div>
	<div>
		<label>Checkbox Big</label>
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
	</div>
	<div>
		<label>Radio Small</label>
		<div>
			<input type="radio" name="radio-1-set" checked />
			<input type="radio" name="radio-1-set" />
			<input type="radio" name="radio-1-set" />
			<input type="radio" name="radio-1-set" />
		</div>
	</div>
	<div>
		<label>Radio Big</label>
		<div>
			<input type="radio" name="radio-2-set" />
			<input type="radio" name="radio-2-set" />
			<input type="radio" name="radio-2-set" checked />
			<input type="radio" name="radio-2-set" />
			<input type="radio" name="radio-2-set" />
		</div>
	</div>

Перейдем к коду CSS. Мы задаем стили не самой форме ввода, а подписи. Так что обратимся к ней следующим образом:

.regular-checkbox + label { }

И зададим самим переключателям-флажкам и радиокнопкам свойство display: none;, чтобы они не отображались.

Теперь зададим стили маленькому переключателю-флажку. Добавим ему тени блока и границы:

.regular-checkbox {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

После этого зададим стили для активного состояния, когда пользователь нажимает на переключатель-флажок, и для состояния, когда переключатель-флажок установлен:

.regular-checkbox:active, .regular-checkbox:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.regular-checkbox:checked {
	background-color: #e9ecee;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

Затем мы зададим стили для псевдокласса :after. В них будет находится галочка для состояния, когда переключатель-флажок установлен, которую мы создадим с помощью свойства content:

.regular-checkbox:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;
}

Далее мы просто изменим размеры для больших переключателей-флажков:

.big-checkbox {
	padding: 18px;
}
.big-checkbox:checked:after {
	font-size: 28px;
	left: 6px;
}

У радиокнопок все примерно так же, только в этот раз закруглим углы и используем отдельный элемент, а не свойство content, для выбранной радиокнопки:

.regular-radio {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 50px;
	display: inline-block;
	position: relative;
}

.regular-radio:checked:after {
	content: ' ';
	width: 12px;
	height: 12px;
	border-radius: 50px;
	position: absolute;
	top: 3px;
	background: #99a1a7;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
	text-shadow: 0px;
	left: 3px;
	font-size: 32px;
}

.regular-radio:checked {
	background-color: #e9ecee;
	color: #99a1a7;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

.regular-radio:active, .regular-radio:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.big-radio {
	padding: 16px;
}
.big-radio:checked:after {
	width: 24px;
	height: 24px;
	left: 4px;
	top: 4px;
}

Вот и все! Можете посмотреть демонстрацию работы или скачать исходный код. Надеемся, вам понравился этот урок.

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:

Делаем красивые кнопки выбора (стилизация radio input)

Сегодня я покажу пример как всего в несколько строчек кода сделать приятные и удобные кнопки выбора для вашего сайта. Они отлично впишутся как в десктопную версию вашего сайта так и в мобильную.

Не могу не отметить, что делать стандартные Radio-кнопки или, тем более, выпадающие списки для выбора из 2-4 вариантов не очень удобно и красиво. Поэтому я решил показать вам как можно сделать подобные кнопки выбора значительно удобнее.

Разметка

Нам понадобится всего несколько дополнительных элементов: при написании разметки формы, вам потребуется обернуть каждую пару input + label в блочный элемент, в моём случае это div с классом form-item и так же поступить с этими div’ами, у меня это контейнер с классом radio-container. Вы наверняка уже сталкивались ранее с подобным подходом, если использовали Boostrap Framework.

Я набросал макет для 2, 3 и 4 кнопок выбора (не рекомендую использовать данный подход для большего количества элементов, в таком случае лучше воспользоваться выпадающим списком):

<form> <div> <div> <input type=»radio» name=»option1″ checked> <label for=»radio1″>radio1</label> </div> <div> <input type=»radio» name=»option1″> <label for=»radio2″>radio2</label> </div> </div> </form> <br> <form> <div> <div> <input type=»radio» name=»option2″ checked> <label for=»radio3″>radio3</label> </div> <div> <input type=»radio» name=»option2″> <label for=»radio4″>radio4</label> </div> <div> <input type=»radio» name=»option2″> <label for=»radio5″>radio5</label> </div> </div> </form> <br> <form> <div> <div> <input type=»radio» name=»option3″ checked> <label for=»radio6″>radio6</label> </div> <div> <input type=»radio» name=»option3″> <label for=»radio7″>radio7</label> </div> <div> <input type=»radio» name=»option3″> <label for=»radio8″>radio8</label> </div> <div> <input type=»radio» name=»option3″> <label for=»radio9″>radio9</label> </div> </div> </form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<form>

  <div>

      <div>

      <input type=»radio» name=»option1″ checked>

      <label for=»radio1″>radio1</label>

    </div>

      <div>

      <input type=»radio» name=»option1″>

      <label for=»radio2″>radio2</label>

    </div>

  </div>

</form>

 

<br>

 

<form>

  <div>

    <div>

      <input type=»radio» name=»option2″ checked>

      <label for=»radio3″>radio3</label>

    </div>

      <div>

      <input type=»radio» name=»option2″>

      <label for=»radio4″>radio4</label>

    </div>

      <div>

      <input type=»radio» name=»option2″>

      <label for=»radio5″>radio5</label>

    </div>

  </div>

</form>

 

<br>

 

<form>

  <div>

    <div>

      <input type=»radio» name=»option3″ checked>

      <label for=»radio6″>radio6</label>

    </div>

      <div>

      <input type=»radio» name=»option3″>

      <label for=»radio7″>radio7</label>

    </div>

    <div>

      <input type=»radio» name=»option3″>

      <label for=»radio8″>radio8</label>

    </div>

    <div>

      <input type=»radio» name=»option3″>

      <label for=»radio9″>radio9</label>

    </div>

  </div>

</form>

Стили

Для начала нам необходимо будет скрыть сами элементы выбора, я сделал это просто, при помощи свойства display: none. Теперь пользователю отображаются только элементы label, если вы не допустили ошибок в разметке, то по нажатию на них, элементы выбора должны активироваться, вы можете проверить это при помощи инструментов разработчика в вашем браузере.

Далее выравниваем label по горизонтали, вы можете сделать это несколькими способами:

  • При помощи свойства float: left;, применённого к элементам label. Я не рекомендую данный подход, так как он в некоторых ситуациях, может сломать вёрстку, и, кроме того, вам придётся использовать хак в виде дополнительного элемента clearfix.
  • Использовать свойство display: inline-block;, для элементов label. Данный подход я использовал ранее, до того как практически во всех браузерах появилась поддержка flexbox.
  • Для родительского контейнера (в моём случае это radio-container) воспользоваться свойством display: flex;

Я использую третий вариант, flexbox поддерживаться практически во всех браузерах, если вы хотите поддерживать IE, этот подход вам не подойдёт.

Далее нам осталось лишь показать пользователю какой элемент активен на данный момент, сделать это очень просто, но есть один нюанс: ваш элемент input должен следовать перед элементом label, иначе css свойство, приведённое ниже, работать не будет.

Для того чтобы выделить активный элемент используем следующий приём:

.radio-container .radio-btn input:checked + label{ background-color: #0082fe; color: #fff; }

.radio-container .radio-btn input:checked + label{

  background-color: #0082fe;

  color: #fff;

}

Эта запись означает, что вложенные стили будут применяться только к элементу label и только в том случае, если элемент radio, к которому относится label, активен в данный момент.

Как видно из записи, активный элемент будет другого цвета и текст будет белым, в моём примере этого достаточно.

Результат

Я добавил ещё немного стилей для более красивого отображения элементов выбора, вот какой результат у меня получился:

Можно немного изменить стили и получить такой результат:

Как видите, вы можете легко изменить внешний вид получившихся кнопок как вам угодно.

Данный приём очень хорошо работает когда у вас есть всего 2-4 варианта выбора, на пример гендерная принадлежность пользователя, выбор из вариантов «Да», «Нет», период оповещения (ежедневно, еженедельно, ежемесячно) и так далее. При больше количестве элементов советую воспользоваться выпадающим списком, это будет и удобнее для пользователя и красивее выглядеть на вашем сайте.

comments powered by HyperComments

Простая кастомизация Checkbox и Radio / Хабр

Вместо вступления

Всем доброго времени суток!

Кастомизация элементов форм наверное одно из самых увлекательных занятий в Веб-дизайне. Оправданное ли это занятие решает каждый для себя сам, хотя очевидно, что в наше время дизайнеры и верстальщики все же уделяют этому свои силы и время.

К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.

Уверен, что на большая часть специалистов на Хабре, применяют схожие методы, для тех же, кто использует js-библиотеки, вроде Uniform, надеюсь будет полезной эта статья.

Поехали!

Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform, но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.

Основная идея строится на нативном «умении» HTML тега label устанавливать связь с определенным элементом формы. Собственно и все, дальше только код.
Разметка

<ul>                
    <li>
        <input id=»cfirst» type=»checkbox» name=»first» checked hidden />
        <label for=»cfirst»>Checked checkbox</label>
    </li>
    <li>
        <input id=»csecond» type=»checkbox» name=»second» hidden />
        <label for=»csecond»>Unchecked checkbox</label>
    </li>
    <li>
        <input id=»cthird» type=»checkbox» name=»third» hidden disabled />
        <label for=»cthird»>Disabled checkbox</label>
    </li>
    <li>
        <input id=»clast» type=»checkbox» name=»last» checked hidden disabled />
        <label for=»clast»>Disabled checked checkbox</label>
    </li>
</ul>
<ul>                
    <li>
        <input id=»rfirst» type=»radio» name=»radio» checked hidden />
        <label for=»rfirst»>Checked radio</label>
    </li>
    <li>
        <input id=»rsecond» type=»radio» name=»radio» hidden />
        <label for=»rsecond»>Unchecked radio</label>
    </li>
    <li>
        <input id=»rthird» type=»radio» name=»radio» hidden disabled />
        <label for=»rthird»>Disabled radio</label>
    </li>
</ul>
 

Совершенно нативная разметка. Использование label вместе с input прям как из учебников. Важным моментом является только то, что нужно указывать id для каждого input и for для label, чтобы связать их.

Думаю все заметили использование атрибута hidden, который скрывает сами input элементы, однако благодаря связи с label, мы все еще может манипулировать ими. В результате мы получаем что-то вроде:


Скучно совсем стало, но все работает. Теперь осталось оформить все это добро как надо. Для этого воспользуемся спрайтом, который применяется на сайте Uniform.

Оформление

input[type=»checkbox»],
input[type=»radio»] {
    display:none;            
}
input[type=»checkbox»] + label, 
input[type=»radio»] + label {
  font: 18px bold;
  color: #444;
  cursor: pointer;
}
input[type=»checkbox»] + label::before,
input[type=»radio»] + label::before {
    content: «»;
    display: inline-block;
    height: 18px;
    width: 18px;
    margin: 0 5px 0 0;
    background-image: url(uniformjs.com/images/sprite.png);
    background-repeat: no-repeat;
}
input[type=»checkbox»] + label::before {
    background-position: -38px -260px;    
}
input[type=»radio»] + label::before {
    background-position: 0px -279px;
}
input[type=»checkbox»]:checked + label::before {
    background-position: -114px -260px;
}
input[type=»radio»]:checked + label::before {
    background-position: -108px -279px;
}
input[type=»checkbox»]:disabled + label::before {
    background-position: -152px -260px;
}
input[type=»checkbox»]:checked:disabled + label::before {
    background-position: -171px -260px;
}
input[type=»radio»]:disabled + label::before {
    background-position: -144px -279px;
}
input[type=»radio»]:checked:disabled + label::before {
    background-position: -162px -279px;
}​

Тут все так же максимально просто. Используем псевдо-элемент before для того, чтобы показывать наши «виртуальные контролы» и пользователь не заметил подмены. Части спрайта, меняем в зависимости от состояния input‘а.

В результате получаем что-то вроде:

Демо

Выгода использования подобного подхода по сравнению с тем же Uniform очевидна. Никаких javascript для оформления, никаких лишних тегов, более простая, правильная и семантичная разметка. Такой же способ можно использовать для придания данным элементам более причудливых форм. К примеру, без проблем можно заделать чекбоксы в стиле iPhone не применяя при этом javascript.

Надеюсь для статья будет полезна начинающим верстальщикам и остановит их о использования js-костылей для подобных целей. Спасибо за внимание!

UPD: Как было отмечено уважаемым SelenIT2 данный способ вероятно не будет работать в браузере Safari под платформу iOS из-за досадной ошибки в поддержке html спецификации (ссылка).

Еще раз о визуализации input типа checkbox и radio. Для тех, кто забыл как / Хабр

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

Недавно у меня была короткая работа по разработке ТЗ на модернизацию давно существующего проекта. И, в частности дело касалось стилизации пресловутых <input type=»checkbox»>. Выяснилось, что исполнитель, программист «на все руки» даже не понял, что я ему на словах объяснял как это сделать. Пришлось делать примеры и, как результат, появился этот текст.

Напомню, что сейчас checkbox и radiobox разные сайты изображают по-разному. Бывает, что не отмеченный input сразу и не разглядишь – такой он «дизайнерский красивый», а у последних версий Chrome выбранные checkbox стали гнусного цвета циан.

Итак, ситуация


Есть три компании, которые используют некий программный продукт, связанный с заказами, бухгалтерией, складом и пр. Работа с заказчиками, партнерами, исполнителями и пр.

Маркетологи и рекламщики тоже его используют. Что эта система делает – неважно, на чем написано – неважно.

А важно, что на сайте этого продукта есть много страниц с формами, на которых много input checkbox и radio.

Жалобы сотрудников


Директор: На большом экране плохо видно и незаметны «крыжики».
Главбух: На моем компе «крыжики» выглядят так, у сотрудниц иначе, дома тоже не так, а на планшете совсем иначе.
Маркетолог: А можно, так что бы некоторые не выбранные позиции были красными, а другие выбранные были зелеными?
И т.д., и т.п.

Итак, задача


  1. Минимальными затратами и минимальными изменениями исправить внешний вид checkbox и radiobox.
  2. Сделать стилизацию checkbox и radiobox для разных юзеров. Важно: это закрытый сайт, там «всё свои», «красоты» не нужны, а нужна эффективность восприятия.

Что нельзя


1. Серверную часть трогать нельзя.
2. Файлы javascript трогать нельзя, свой javascript вставлять нельзя.
3. Файлы css трогать нельзя.

А что можно


1. Править html шаблоны.
2. Создать файл стилей для всех юзеров.
4. Создать файл стилей для конкретного юзера или группы юзеров.
А что сделали можно сразу посмотреть на codepen.io, но лучше почитать дальше.

Предварительное изучение показало


1. Почти все имеют поле name, а которые не имеют, то у них есть id.
2. Все имеют поле name, некоторые имеют id.
3. Соответственно, в css к checkbox можно обращаться как по id, так и по name. К radio – или по id, или по номеру потомка у родителя.

Фрагменты исходного кода:

/* вариант 1 */
<tag><input type="checkbox"> Некий текст</tag>

/* вариант 2 */
<tag><input type="checkbox"> Некий текст<br>
<input type="checkbox"> Некий текст</tag>

/* вариант 3 */
...<label><input type="checkbox"> Некий текст</label>...

/* вариант 4 */
<td><input type="checkbox"></td>
<td><label for="idxxx">Некий текст</label></td>

Так исправим код:
/* вариант 1 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label></tag>

/* вариант 2 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label><br>...</tag>

/* вариант 3 */
...<label><input type="checkbox"><s></s><span>Некий текст</span></label>...

/* вариант 4 */
<td><label><input type="checkbox"><s></s></label></td>
<td><label for="idxxx">Некий текст</label></td>

Всё тоже самое и для , класс у LABEL тот же.

Что конкретно сделали?


  1. Каждый input (корме варианта 3) обернули тэгом LABEL с нашим классом. Варианту 3 просто добавили класс.
  2. Сразу после input вставили пустой тэг S. Так как сам input будет не видим, то это тэг будет визуализировать это input.
  3. Сопроводительный текст обернули тэгом SPAN (кроме варианта 4). Этот тэг понадобиться, когда будем решать вопрос выравнивания визуального input относительно этого текста.
  4. Варианту 4 добавили еще класс, что бы не осуществлять это выравнивание, раз сопроводительный текст стоит в другой ячейки таблицы. Строго говоря, надо было бы сделать на оборот – вариантам 1-3 добавить класс, отвечающий за выравнивание. Но, вариантов 1-3 гораздо больше, чем 4-го и что бы не раздувать html сделано так.

Риторические вопросы и риторические же ответы 1. Зачем тэг S? Ну, не нравится S – можно использовать любой другой строчный элемент. Просто он должен быть, его можно стилизовать в зависимости от состояния предшествующего input.

2. Почему тэги S и SPAN без классов? Ну, зачем раздувать html? Тем более, что не очевидно, что одна из конструкций ниже будет «работать» медленнее другой.

  .new-input > S { }
  .new-input > .new-input-S {}

3. Как вы догадались, мне не нравятся идеи БЭМ, тем более идея «раздувать» html файл обилием упоминаний разных классов. В реальном проекте мы использовали только два класса – mni и mnio. :-))

Некоторые предварительные рассуждения и настройки css касательно box-sizing:border-box, нормализации LABEL, селекторов «A + B», «A ~ B» и «[attr]», псевдоклассов :checked, :disabled и ::before. Кто не уверен, что знает или хочет освежить знания смотрит под катом. Предварительные рассуждения 1. Напомню, что в «старом» css (box-sizing:content-box) свойства width и height задают только ширину и высоту содержимого, а padding и border добавляются к этим значениям. box-sizing:border-box меняет схему так, что padding и border включаются в width и height.

2. Проверка показала, что в нашем случае используется старая модель, а менять «настройки» страниц запрещено. Не «наши» LABEL это простые строчные элементы, в них только текст. Поэтому стилизуем ВСЕ LABEL.

LABEL {
    box-sizing:border-box; cursor:pointer; user-select:none;
}
LABEL *,
LABEL *::before,
LABEL *::after {
    box-sizing:inherit;
}

Т.е., ставим box-sizing:border-box для тэга LABEL, всем его потомкам. Заодно ставим курсор и запрещаем выделение текст (что бы не мешало клику).

3. Комбинация селекторов «A + B» означает, что стили будут применяться только к селектору B, если он следует сразу ПОСЛЕ селектора A, т.е. только для первого B. С другой стороны, «A ~ B» означает, что ко всем селекторам B после селектора A, т.е. для первого и последующих.
Естественно, всё в пределах одного «родителя».

Как это будем использовать?

<label><input type="checkbox"><s></s><span>Некий текст</span></label>
<label><input type="radio"><s></s><span>Некий текст</span></label>

/* 1 */
.new-input > INPUT + S {}
.new-input > INPUT ~ SPAN {}

/* 2 */
.new-input > INPUT:not(:checked) + S {}
.new-input > INPUT:not(:checked) ~ SPAN {}

/* 3 */
.new-input > INPUT:checked + S {}
.new-input > INPUT:checked ~ SPAN {}

/* 4 */
.new-input > INPUT:disabled + S {}
.new-input > INPUT:disabled ~ SPAN {}

/* 5 */
.new-input > INPUT[type="radio"] + S {}

Первая группа – общие стили для тэгов S и SPAN.
Вторая группа – стили только когда INPUT НЕ выбран.
Третья – стили только когда INPUT выбран.
Четвертая – когда INPUT заблокирован.

И, наконец, пятая группа – общие стили для тэга S ТОЛЬКО, если он стоит после input radio.
Таким образом, можно изменять стили тэгов S и SPAN в зависимости от состояния input.

4. Поскольку у нас тэг S будет изображать из себя input, то самому input поставим display:none, его не будет видно, а тэг LABEL будет его переключать, а тэг S будет соответственно меняться. Почему не используем html свойство hidden у input? Потому, что на некоторых браузерах hidden у input «работает» не совсем верно, плюс не будем перегружать html файл.


Итак, начинаем визуализацию input


Пример N 1. Самый простой – используем алфавитные символы
html код тот же, а css будет такой:
/* s1 */
.new-input > INPUT + S::before {
  content: "c";
}
/* s2 */
.new-input > INPUT:checked + S::before {
  content: "V";
}
/* s3 */
.new-input > INPUT[type="radio"] + S::before {
  content: "r";
}
/* s4 */
.new-input > INPUT[type="radio"]:checked + S::before {
  content: "X";
}
/* s5 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s6 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}
/* s7 */
.new-input > S::before {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  color: #fafafa;
  background-color: #37474f;
}
/* s8 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}

Тэг S буде визуализировать input. Но мы «разделим» его по функционалу: сам тэг S будет отвечать за размещение в LABEL и выравнивание относительно следующего SPAN.

А псевдоэлемент S::before разместится внутри тэга S и будет изображать из себя input.

Строка s1 определяет, какой символ будет помещен в S::before когда input не выбран. В принципе надо было бы написать «.new-input > INPUT:not(:checked) + S::before», но некоторые браузеры (например, IE), подобную конструкцию могут и не исполнить.
Строка s2 определяет символ, когда input выбран.
Строки s3 и s4 делают то же для input radio.
Строка s5 описывает, что будет если input заблокирован – в данном случае тэг S будет наполовину прозрачным.
Строка s6 определяет выравнивание, в данном случае дает отбивку слева и справа (только в этом примере). Плюс, убирает штатное перечеркивание.
Строка s7 делает квадратик, s8 превращает его в кружок для input radio.

Пример N 1 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.

Чуток подробнее про display: inline-block, font-size, line-height Конченая высота строки текста определяется на основе заданных font-size, line-height. При единичном line-height – высота будет по font-size, при числовом line-height – высота будет по их произведению или, при указании единиц измерения для line-height – высоту определит максимальное значение. В примере указан line-height:1.25, поэтому и у S::before указано width:1.25em.

Для S::before указано display: inline-block – в этом случае S::before «внутри» себя будет блоком (можно указать ширину, высоту, рамки и пр.), а «снаружи» он останется строчным элементом. В дальнейшем об этом будет подробнее.

Вопрос:

Может можно использовать специальные символы? Типа вот этих:
□ ■ ▢ ▣ ○ ● ◎◉
Задать им нужный размер и всё. Нет?

Ответ:

Можно. Но не нужно. Ибо будет большой геморрой и танцы с бубнами по заданию нужного размера, выравнивания по вертикали, обрезке по высоте и прочее. Плюс, разные браузеры с этими символами работают по-разному.
Мы пошли другим путем. Хотя в финальном примере есть реализация этой идеи.

Пример N 2. «Рисуем» элементы input средствами css

html код тот же, а css будет такой:

/* s1 */
.new-input > S::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 1px solid currentColor;
  padding: 2px;
  background-clip: content-box;
  border-radius: 20%;
}
/* s2 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}
/* s3 */
.new-input > INPUT:checked + S::before {
  background-color: currentColor;
}
/* s4 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s5 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}

Строка s1 определяет S::before для визуализации input. Это будет inline-block, ширина и высота которого установлена в 0.75em, что примерно равно высоте прописной буквы и зависит от font-size родителя. Задана тонкая рамка текущим цветом, внутренняя отбивка, небольшое скругление углов. И – самое важное! – установлено свойство background-clip:content-box. Это очень интересное свойство – если будет установлен background-color, то он закрасит только контентную часть и не затронет отбивку (padding). Что нам и надо.

Строка s2 для input типа radio делает S::before круглым.
Строка s3 для отмеченного input устанавливает для S::before background-color текущим цветом. Т.е., «рисует» внутри квадратик или кружок.
Строка s4 отрабатывает блокировку input, строка s5 дает отбивки слева и справа.

Преимущества этого метода

  1. Всё очень просто. Работает на всех браузерах. Даже у IE10 (в эмуляции у 11-го).
  2. Можно раскрашивать по своему усмотрению.
  3. Раз S::before это inline-block, то он сидит на попе базовой линии ровно и никуда с нее не слезает. Если он по высоте будет больше текста, то просто увеличит высоту строки и останется на базовой линии.
  4. Раз визуализация input находится внутри тэга S, то его можно легко позиционировать и выравнивать.
  5. Размеры S::before в em дают возможность задавать его размер относительно размера текста подписи. Можно, к примеру, поставить предельные значения высоты и ширины.

Недостатки этого метода

В основном в использовании размеров в em. Дело в том, что может возникнуть ситуация когда ширина и высота при расчете (из em в px) будет иметь дробное значение. На обычных компьютерах с обычным экраном округление может произойти не корректно. Например, размеры 12.8px на 12.8px у той же Мозилы могут стать как 13px на 12px. Тогда надо ставить фиксированные размеры. Хотя на современных мониторах и видеокартах, ноутбуках, на планшетах и смартфонах этого не происходит из-за того, что точка (пиксель) браузера состоит из нескольких пикселей экрана.

Пример N 2 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.
Итак, первую задачу – визуализацию input – выполнили. Переходим к избранной «раскраске».

Раскрашиваем input


html для примера:
<label><input name="chb1" type="checkbox" ...><s></s><span>Некий текст</span></label>
<label><input type="radio" ...><s></s><span>Некий текст</span></label>

К input типа checkbox будем обращаться по name, к radio по id.

Всё красим в синий

/* только input */
.new-input > INPUT[name="chb1"] + S,
.new-input > INPUT#rb1 + S {
  color: #0091ea;
}
/* только text */
.new-input > INPUT[name="chb1"] ~ SPAN,
.new-input > INPUT#rb1 ~ SPAN {
  color: #0091ea;
}
/* или всё */
.new-input > INPUT[name="chb1"] ~ *,
.new-input > INPUT#rb1 ~ * {
  color: #0091ea;
}

Помним о специфичности в css, эти стили будут более специфичны, чем базовые и сработают обязательно. Чем они отличаются от описанных выше? Тем, что применяются только к избранным input – к тем, что имеет указанное значение name и id.

Тут всё хорошо кроме того, что не выбранные input будут не очень хорошо глядеться – тонкая синяя рамка мало заметна.

Красим в зеленый, когда input выбран

/* только input */
.new-input > INPUT[name="chb1"]:checked + S,
.new-input > INPUT#rb1:checked + S {
  color: #00c853;
}
/* только text */
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}
/* или всё */
.new-input > INPUT[name="chb1"]:checked ~ *,
.new-input > INPUT#rb1:checked ~ * {
  color: #00c853;
}

Первый вариант, на мой взгляд, не очень хорош – зеленым будут и рамка, и внутренний квадратик/кружок. Можно раскрасить только его.
/* только input и только внутри */
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}

Красим в красный, когда input НЕ выбран
/* только input */
.new-input > INPUT[name="chb1"]:not(:checked) + S,
.new-input > INPUT#rb1:not(:checked) + S {
  color: #d50000;
}
/* только text */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
}
/* или всё */
.new-input > INPUT[name="chb1"]:not(:checked) ~ *,
.new-input > INPUT#rb1:not(:checked) ~ * {
  color: #d50000;
}

Логика понятна? Можно и дальше делать более сложные конструкции.

Например, при не выбранном input текст должен быть красным и жирным, а при выбранном внутренний элемент input и текст должен быть зеленым. Элементарно!

/* текст, когда нет выбора */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
/* внутренний элемент input, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}
/* текст, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}

А, к примеру, надо обработать целую группу input (10-15 штук). Что бы не писать кучу строк можно найти их общего родителя (.parent_element) и сократить условие.
.parent_element > .new-input > INPUT:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
.parent_element > .new-input > INPUT:checked + S::before {
  background-color: #00c853;
}
.parent_element > .new-input > INPUT:checked ~ SPAN {
  color: #00c853;
}

Всё можно посмотреть в финальном примере на codepen.io

Вот, вроде как, и всё. Осталось только «почесать родимые пятна» перфекциониста – проблемы выравнивания.

Выравнивание визуального input и сопроводительного текста


Для начала напомню общеизвестные вещи на тему размещения текста, форматирования и прочего. Всё под катом. Общеизвестные вещи Буду стараться не применят специальные термины, ибо в дизайне, верстке и css они иногда отличаются. Всё простыми словами.

1. Свойство font-size не определяет размер букв, а только размер знакоместа. Есть базовая линия (baseline), по которой расположены «нормальные» буквы. У «ненормальных» – g ц – нижние элементы «свисают» ниже её. Есть линия капители (cap height) – это верхняя граница «нормальной» прописной (заглавной) буквы. У «ненормальных» – Ё Й – верхние элементы «вылезают» выше её. Иными словами, размер прописной буквы это расстояние от базовой линии до капители, а знакоместо это чуть больше сверху и снизу. Обычно в «нормальных» шрифтах высота капители это 75% от высоты знакоместо. К примеру, font-size:16px, а размер буквы Н у шрифта Arial будет 12px. Но, бывают «специалисты» у шрифтов которых всё не так.

2. Свойство line-height определяет высоту строки. Если его вычисленное значение больше, чем указано в font-size, то браузер разместит текст так, что бы нормальная прописная буква была по середине высоты строки. Есть нюансы, но тут они не важны.

3. Соответственно, в нашем случае тэги S и SPAN должны иметь одинаковые значения font-size и line-height желательно заданные где-то выше у родителей. В нашем случае в примерах font-size:16px и line-height:1.25. Поэтому в примере N1 у S::before ширина указана 1.25em, а высота у него определяется автоматически. А в примере N2 (и финальный пример) – у S::before ширина и высота 0.75em, что бы был по высоте с прописную букву. Задав другое значение font-size ничего менять не надо. Естественно, эту величину надо подогнать под конкретный шрифт.

4. Если перед текстом стоит какая-то квадратная или круглая «штучка», то любой дизайнер скажет, что она должна быть по высоте с прописную букву. А отбивка между ними должна быть в определенных процентах от размера шрифта. Если высота меньше высоты буквы, то она должна быть визуально значительно меньше, но не меньше 50%. Если больше, то тоже визуально значительно больше, но не больше 150%. А вот чуть-чуть, на пару пикселей больше/меньше – это ужас-ужас! Ну, и расположена эта штучка должна быть на базовой линии или по середине без всяких там чуть-чуть.

Зачем я это упомянул? А затем, что перфекционисту глаза режет, когда input криво стоит рядом с текстом — или прилипает, или далеко, или чуть меньше, или чуть больше. Мы так делать не должны!


Что будет, если сопроводительный текст в SPAN будет выведен в две или три строки? Очевидно, что он «залезет» под input. Это не красиво, надо исправить.

Один древний метод такой: тэгу S делаем float:left, а тэгу SPAN display:block и overflow:hidden.

Получится колонка текста. Подразумевается, что у кого-то из них будет соответствующий margin, что даст отбивку между ними. Ну, ещё добавляется геморрой с прекращением float после SPAN. Мы пойдем современным путем – применим flexbox. Он тут совершенно к месту.

.new-input {
  display: flex;
  flex-direction: row;
  align-items: start;
}
.new-input > S {
  margin-right: 4px;
  flex: 0 0 auto;
}
.new-input > SPAN {
  flex: 0 1 auto;
}

В этом случае тэг LABEL (который .new-input) будет flex, S и SPAN будут блоками, разместятся вверху LABEL. Текст в SPAN в случае необходимости будет в несколько строк. Вот из-за этого визуальный input описали в S::before. Независимо от высоты SPAN S::before будет расположен на одной базовой линии с первой строкой SPAN. Как вариант можно было указать align-items:center – тогда при однострочном SPAN визуальный input был бы вверху, а при двух строках – посередине, а при трех – у второй строки. В финальном примере можно переключать расположение input.

Вот и всё


Надеюсь, было интересно и кому-нибудь полезно. Прошу, не сильно меня ругать – это мой первый опыт на Хабр.

Пример N 1 – просто демонстрация взаимодействия изменения input и соседнего элемента.

Пример N 2 – визуализация input средствами css, как основа решения.

Финальный пример – всё описанное вместе.

Про конкретную реализацию


Там были обширные формы, где блоки полей возможные для правки конкретным пользователям выделялись слабым фоном, а остальным input имели свойство disabled и служили только для информации. Поэтому стиль «.new-input > INPUT:disabled + S::before» не применяли.

UPD


В ответ на комментарии Пример N 3.
Там работает поддержка клавиш и фокуса для скрытого input.

Красивые чекбоксы и радиокнопки на CSS3 без JavaScript / Хабр

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

Демонстрация Скачать исходники

Для начала сделаем простой checkbox:

Теперь необходимо спрятать чекбокс и использовать спрайты для отображения отображенного чекбокса / радиокнопки:

  input [type = "checkbox"] {
    дисплей: нет;
}
input [type = "checkbox"] + label span {
    дисплей: встроенный блок;
    ширина: 19 пикселей;
    высота: 19 пикселей;
    маржа: -1px 4px 0 0;
    вертикальное выравнивание: по центру;
    фон: url (check_radio_sheet.png) слева вверху без повтора;
    курсор: указатель;
}

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

  input [type = "checkbox"] {
    дисплей: нет;
}
input [type = "checkbox"] + label span {
    дисплей: встроенный блок;
    ширина: 19 пикселей;
    высота: 19 пикселей;
    маржа: -1px 4px 0 0;
    вертикальное выравнивание: по центру;
    фон: url (check_radio_sheet.png) слева вверху без повтора;
    курсор: указатель;
}
input [type = "checkbox"]: checked + label span {
    фон: url (check_radio_sheet.png) -19px вверху без повтора;
}

Поддержка браузерами


Псевдоклассы, в использовании: проверено, отлично работают в большинстве браузеров, за исключением Internet Explorer 9 (и ниже) и Safari в iOS 6-ой. Вот так наша форма отображается в IE:

написан по мотивам урока на tutplus.com Подсказка: простые флажки и переключатели CSS3.

.

Стилизация магнитолы на CSS

Вы здесь: Главная — CSS — CSS3 — Стилизация радио на CSS

Давайте немного освежим в память, для чего нужны радио кнопки на сайтех. Radio кнопка — это переключатель, который используют в формах, когда пользователю надо сделать выбор, между вариантами. Например, выбрать между марками автомобилей, для новой аренды.

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

HTML код

Атрибут для у тега label устанавливает том с input через id , в случае если, input не вложен в label . Значения у для и id , должны быть одинаковыми. В нашем примере у первой связки — honda , а у второй renault . Когда пользователь должен выбрать только один вариант, следует прописать обоим инпутам, атрибут имя с одинаковым значением ( вагон ).Атрибут типа указывает, что инпут надо обозначить, как radio кнопкой (круглым).

Обернем первую связку вход + метка в div с классом радио , то же самое сделаем для второй связки. Присвоим так же классы вход и ярлык , для их дальнейшей стилизации.








По умолчанию, браузер отображит любой элемент формы.На картинке ниже, вы можете увидеть наши radio , без CSS стилей.

Скажем спасибо браузеру и погрузимся в CSS код для стилизации радиокнопок .

CSS-код

Вложенные теги input + label , позиционируем относительно родителя — div с классом radio .

.radio {
положение: относительное;
нижнее поле: 1 бэр;
}

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

.radio_input {
-webkit-appearance: none; / * Chrome * /
-moz-appearance: none; / * Firefox * /
внешний вид: нет; / * убираем стандартные кружочки * /
позиция: абсолютная;
}

Стилизуем текст внутри тега label .

.radio_label {
padding-left: 25px; / * отступ влево * /
размер шрифта: 1рем;
цвет: # 444;
курсор: указатель; / * курсор рука * /
}

Создадим два состояния радио кнопок, с помощью псевдоэлементов до + после .Стилизуем перед , как пустой белый кружок, после — кружок с цветным фоном, изображающий отмеченное состояние. На деле, круг с меньшим диаметром после , будет находиться внутри круга с большим диаметром до .

Стилизуем псевдоэлемент перед

.radio_label: до {
содержание: "";
дисплей: блок; / * не в строке * /
ширина: 16 пикселей; / * ширина блока * /
height: 16px; / * высота блока * /
border: 1px solid #ccc; / * рамка * /
цвет фона: #fff; / * цвет фона * /
border-radius: 50%; / * получаем круг * /
position: absolute; / * расположен точно в родителе * /
верх: 0; / * расстояние от верха родителя * /
left: 0; / * слева от родителя * /
z-индекс: 1; / * на нижнем слое * /
переход: граница.1s linear; / * плавный переход для границы * /
}

Стилизуем псевдоэлемент после

.radio_label: после {
содержание: "";
дисплей: блок;
ширина: 12 пикселей;
высота: 12 пикселей;
цвет фона: # 49d120;
радиус границы: 50%;
непрозрачность: 0; / * полностью прозрачный * /
позиция: абсолютная;
верх: 3 пикселя;
слева: 3 пикселя;
z-index: 2; / * на верхнем слое * /
переход: непрозрачность.1с линейный; / * плавный переход для непрозрачности * /
}

Нам, нужно менять вид кружка, только при отмеченном состоянии ( проверено ). Когда пользователь кликает в поле ввод , рамка у перед меняет свой цвет.

.radio_input: проверено + .radio_label: до {
цвет границы: # 319612;
}

А у после , прозрачный фон, становится непрозрачным, кружокивается в зеленый цвет.

.radio_input: проверено + .radio_label: после {
непрозрачность: 1;
}

Таким образом, в неотмеченном состоянии, поле ввод — белое. А в отмеченном состоянии — зелёное. Мы получили стилизованные радио кнопки на чистом CSS .

Демонстрация примера

  • Создано 24.05.2019 10:19:43
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой ссылки на сайт (http: // myrusakov.RU)!

Добавляйтесь ко мне в друзья ВКонтакте : http://vk.com/myrusakov.
Если вы хотите дать оценку мне и моей работе, напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления : Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий страницы внизу.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на сайте, в контакте):

  1. Кнопка:
    Как создать свой сайт < / a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    Как создать свой сайт

    . Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL = «https://myrusakov.ru»] Как создать свой сайт [/ URL]
.

Переключатели | htmlbook.ru

Переключатели (жарг. радиокнопки) использовать, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.

Атрибуты переключателей в табл. 1.

Табл. 1. Атрибуты переключателей
Атрибут Описание
проверено Предварительное выделение переключателя.По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление отмечено сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
наименование Имя группы переключателей для идентификации поля. Переключатели являются групповыми группами элементы, то имя у всех элементов быть одинаковым.
значение Задаёт, какое значение будет отправлено на сервер.Здесь уже каждый элемент должно иметь уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователь.

Создание группы переключателей показано на примере 1.

Пример 1. Создание переключателей

HTML5IECrOpSaFx

  

 
  
   Переключатели 
 
 
  

   
  Какое у вас состояние разума?  

    
  Не дзен 

    
  Дзен 

    
  Полный дзен

В результате получим следующее (рис.1).

Рис. 1. Вид переключателей в браузере

Заметьте, что в данном примере атрибута name для всех переключателей одинаково, именно в таком случае браузер понимает, что переключатели связаны между собой и помечает только один пункт из предложенных. Значение атрибута же должно различаться, чтобы обработчик формы мог понять, какой вариант выбранной функции.

.

No related posts.

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

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

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