Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Css label checked: forms — CSS selector for a checked radio button’s label

Содержание

CSS правило для: проверено отделено от своего INPUT

Для обычного переключателя как

<input type="radio" name="radios"value="yes">
<label for="radio2">Yes</label>

<input type="radio" name="radios" value="no">
<label for="radio3">Yes</label>

CSS метки checked можно установить с помощью этого селектора

input:checked + label {
}

но если label не следует сразу за input ? Например, если поместить input s и label s в html table.

Атрибуты for и id соединяют label и input , так как входные данные будут выбраны щелчком по метке. Интересно, можно ли использовать это соединение для установки правил CSS метки проверяемого входа.

css

css-selectors

Поделиться

Источник


Googlebot    

25 сентября 2013 в 09:22

2 ответа




4

Нет, не существует. Вы не можете использовать значения атрибутов HTML «dynamically» в селекторах CSS (хотя вы можете использовать их статически, как в label[for=radio2] ).

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

Поделиться


Jon    

25 сентября 2013 в 09:29



1

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

Итак, предположим, что если элементы не соседствуют друг с другом, но они оба находятся на одном и том же уровне вложенности под общим родителем или label является дочерним элементом другого вложенного элемента, который вложен на том же уровне, что и ваш checkbox

<div>
   <input type="checkbox" />
   <p>Hello</p>
   <label>Color me on check</label>
</div>

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

Таким образом, вы можете связать элементы цепочкой, как описано выше.


Соседние элементы того же уровня, вы можете нацелиться на следующий вложенный элемент, например

input[type=checkbox]:checked + p + div > label {
    color: red;
}

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


Но в тот момент, когда вы обернете элемент вокруг input type checkbox , селектор выйдет из строя, как я уже сказал, Вы не сможете выйти из комнаты, как только окажетесь внутри

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


Так что это похоже

Parent
Checkbox    Level 1                    
Div         Level 1                    input[type=checkbox]:checked + div
Label       Level 1                    input[type=checkbox]:checked + div + label
   Span     Level 2 (Child of label)   input[type=checkbox]:checked + div + label > span
   i        Level 2 (Adjacent to span) input[type=checkbox]:checked + div + label > span + i

Неудачные Случаи

Parent
Div             Level 1
   Checkbox     Level 2 (Child of div)
Span            Level (Adjacent to div) You won't be able to select this on check of checkbox

Поделиться


Mr. Alien    

25 сентября 2013 в 09:30


Похожие вопросы:

накопительное правило css

Я пытаюсь написать код javascript, который загружает несколько файлов css. Но элемент link не имеет события onload, поэтому я добавляю в свой документ какой-то дополнительный элемент, который…

Стиль a <label> основан на его состоянии <input>

Возможно ли, имея только CSS, стилизовать метку HTML в зависимости от ее состояния input? В моем случае я хочу стилизовать <input type=checkbox> в зависимости от того, проверен ли он. Я…

IE7 CSS-Label background-color doesn’t change on radio button checked

У меня есть проблема с выделением метки, когда входное радио проверено на IE7. код очень прост, и вы можете посмотреть его здесь: JsFiddle Мне нужно, чтобы он работал на IE7 без использования…

выбор <label> , но исключение <label> , содержащих <input>

У меня есть 2 типа меток: обычные метки, такие как первая строка, и метки, содержащие поле ввода внутри них. Какое правило CSS может позволить мне выбрать все <label> , но исключить все метки,…

Использование CSS для переключения левого / правого положения <label> и <input> в IE7+

У меня есть форма, содержащая последовательность из <label> , <input> пар (по одной на строку) следующим образом: <ol style=list-style: none;> <li class=normal>…

Должны ли мы использовать <label> для каждого <input> ?

Должны ли мы использовать <label> для каждого input ?, даже для кнопки отправки и держать скрытым css, если мы не хотим показывать label . или нет необходимости в метке для кнопки отправки?…

Как поместить <label> слева от <input> ?

Рассмотрим следующее HTML/CSS: * { box-sizing: border-box; } .field { overflow: auto; } .field label { float: left; width: 80px; } .field input { display: block; width: 100%; } <div…

CSS селектор не работает-input[type=radio]: проверено

Я делаю заказ для своих переключателей. Однако я наткнулся на проблему, проверяя с помощью CSS, выбрана ли кнопка. <ul class=list> <li><label for=radio_sex_male> <i class=icon…

CSS «input:focus + label» для изменения стиля метки, когда LABEL не находится рядом с INPUT. Возможно ли это?

У меня есть INPUT, за которым следует LABEL, чтобы имитировать заполнитель. Когда фокус находится на элементе управления или в нем есть значение, метка перемещается вверх. Пока все идет хорошо…….

В CSS выберите Родительский <label> для выбранного <input>

Edit: видимо, не могу использовать фигурные скобки <> или он скрывает имена?… Я видел несколько вариантов этого вопроса, однако ни один из них не подходит к моей конкретной проблеме, которая,…

Переключатель стилей на чистом CSS с помощью :checked

От автора: еще пару лет назад разработчики уже могли создавать множество проектов с помощью одного лишь CSS без применения JavaScript. Но сегодня CSS настолько окреп, что можно писать поистине удивительные вещи без единой строки JavaScripta’а. Скорее всего вы уже читали статьи на тему «способы на чистом CSS», в которых демонстрируется мощь каскадных таблиц стилей.

Когда дело касается чисто CSS методов, мы не можем игнорировать псевдокласс :checked, его я и буду использовать в этой статье. Конечно, я не первый, кто пишет об этом способе, уже велись довольно обширные споры по поводу использования элементов формы в качестве замены JavaScript’у. К примеру, статья с Adobe Louis Lazaris и это замечательное слайд шоу от Ryan Seddon.

Применение :checked

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

А теперь можно продолжать.

Создание блока настроек

В демо вы должны были заметить иконку шестеренки и то, как при нажатии на нее появляется блок с параметрами. Перед пояснением того, какой HTML и CSS код лежит за этим, взглянем на следующий код:

/* нам не нужно, чтобы input’ы были видны, нужны только лейблы */
input[type=»checkbox»], input[type=»radio»] {
position: absolute;
visibility: hidden;
}

.settings-box-element {
z-index: 10;
}

/* нам не нужно, чтобы input’ы были видны, нужны только лейблы */

input[type=»checkbox»], input[type=»radio»] {

  position: absolute;

  visibility: hidden;

}

 

.settings-box-element {

  z-index: 10;

}

Поскольку нам необходимо отображать только лейблы, то код выше как раз и прячет чекбоксы и радиокнопки. Более того, всем лейблам присвоен класс settings-box-element со свойством z-index , нам нужно, чтобы эти поля всегда оставались поверх страницы.

Теперь мы можем разобраться в коде блока настроек. Начнем с кнопки-шестеренки. Ее код:

HTML

<!—иконка шестеренки, открывает блок при клике на нее —>
<input type=»checkbox»>
<label for=»settings-btn»></label>

<!—иконка шестеренки, открывает блок при клике на нее —>

<input type=»checkbox»>

<label for=»settings-btn»></label>

CSS

.settings-btn + label {
position: fixed;
top: 130px;
right: 0;
display: block;
width: 35px;
color: #e83737;
text-align: center;
background: #fff;
cursor: pointer;
}

.settings-btn + label {

  position: fixed;

  top: 130px;

  right: 0;

  display: block;

  width: 35px;

  color: #e83737;    

  text-align: center;

  background: #fff;

  cursor: pointer;

}

Если вы читали хоть одну или даже две статьи о том, как использовать элементы формы, чтобы не применять JavaScript, то вы уже знаете, что нужно использовать input’ы вместе с лейблами. А значит, если хоть один удалить, то ничего не сработает. У нас есть чекбокс с id=»settings-btn» и лейбл с атрибутом for, указывающим на значение id. Также я добавил класс settings-btn, чтобы использовать его потом.

В CSS лейбл спозиционирован фиксировано position: fixed с соответствующими значениями top и right. Следом идет белый бокс, якобы содержащий кнопки:

HTML

<!—белый бокс, содержащий кнопки —>
<div></div>

<!—белый бокс, содержащий кнопки —>

<div></div>

CSS

.buttons-wrapper {
position: fixed;
top: 130px;
right: -200px; /* должно совпадать со значением ширины */
width: 200px;
height: 240px;
background: #fff;
}

.buttons-wrapper {

  position: fixed;

  top: 130px;

  right: -200px; /* должно совпадать со значением ширины */

  width: 200px;

  height: 240px;

  background: #fff;

}

Наш бокс это пустой DIV с классами «buttons-wrapper» и «settings-box-element». Как я уже говорил выше, последний класс в основном используется для добавления z-index. «buttons-wrapper» нужен чтобы стилизовать сам DIV. И, как вы можете заметить, боксу задана ширина в 200px и высота в 240px. Это чтобы вместились 5 кнопок, можете посмотреть демо. Также задано позиционирование fixed и соответствующие значения right top. Единственное, что стоит отметить, что значение свойства right должно совпадать с шириной блока, но с отрицательным значением (чтобы блок исчез из поля зрения).

Теперь взглянем на код оставшихся 5 кнопок. В комментариях указан фон, к которому относится кнопка:

<!—стили фона —>
<!—светлый фон (#eaeaea) —>
<input type=»radio» name=»layout» checked>
<label for=»light-layout»>
Light Background</label>

<!—темный фон (#494949) —>
<input type=»radio» name=»layout»>
<label for=»dark-layout»>
Dark Background
</label>

<!—фон-изображение —>
<input type=»radio» name=»layout»>
<label for=»image-layout»>
Image Background</label>

<!— фон-шаблон —>
<input type=»radio» name=»layout»>
<label for=»pattern-layout»>
Pattern Background</label>

<!— показать/спрятать контент—>
<input type=»checkbox»>
<label for=»hide-show-content»>
Hide/Show content</label>

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

<!—стили фона —>

<!—светлый фон (#eaeaea) —>

<input type=»radio» name=»layout» checked>

<label for=»light-layout»>

Light Background</label>

 

<!—темный фон (#494949) —>

<input type=»radio» name=»layout»>

<label for=»dark-layout»>

Dark Background

</label>

 

<!—фон-изображение —>

<input type=»radio» name=»layout»>

<label for=»image-layout»>

Image Background</label>

 

<!— фон-шаблон —>    

<input type=»radio» name=»layout»>

<label for=»pattern-layout»>

Pattern Background</label>

 

<!— показать/спрятать контент—>

<input type=»checkbox»>

<label for=»hide-show-content»>

Hide/Show content</label>

.layout-buttons {
display: block;
width: 150px;
padding: 10px 0;
text-align: center;
border: 2px solid black;
box-sizing: border-box;
font-size: 0.875em;
cursor: pointer;
}

.light-layout + label {
position: fixed;
top: 140px;
right: -150px;
}

.dark-layout + label {
position: fixed;
top: 185px;
right: -150px;
}

.image-layout + label {
position: fixed;
top: 230px;
right: -150px;
}

.pattern-layout + label {
position: fixed;
top: 275px;
right: -150px;
}

.hide-show-content + label {
position: fixed;
top: 320px;
right: -150px;
}

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

.layout-buttons {

  display: block;

  width: 150px;

  padding: 10px 0;

  text-align: center;

  border: 2px solid black;

  box-sizing: border-box;

  font-size: 0.875em;

  cursor: pointer;

}

 

.light-layout + label {

  position: fixed;

  top: 140px;

  right: -150px;

}

 

.dark-layout + label {

  position: fixed;

  top: 185px;

  right: -150px;

}

 

.image-layout + label {

  position: fixed;

  top: 230px;

  right: -150px;

}

 

.pattern-layout + label {

  position: fixed;

  top: 275px;

  right: -150px;

}

 

.hide-show-content + label {

  position: fixed;

  top: 320px;

  right: -150px;

}

Обратите внимание на то, что первый чекбокс уже отмечен атрибутом «checked». Мы используем его по умолчанию.
Каждый инпут имеет свой id, а каждый лейбл свой for, и они совпадают между собой. И вы можете знать, а может и нет, но весь секрет с атрибутом for в том, что, если мы его используем, то при клике на лейбл с атрибутом for автоматически выбирается чекбокс или радиокнопка. Вот почему мы можем использовать псевдокласс :checked.

Всем лейблам присвоен класс «layout-buttons». Он используется для добавления базовых и общих стилей, как ширина, padding, border и т.д. Другие классы используются для индивидуальной стилизации. Как вы могли заметить, для иконки шестеренки и для белого бокса используется фиксированное позиционирование с определенными значениями top и right. А значение top для каждого лейбла больше на 45px, чем у предыдущего; это нужно, чтобы кнопки стали в столбец, не налегая друг на друга. Также обратите внимание на то, что значение right равняется ширине кнопок, только с отрицательным значением.

Осталась последняя часть CSS кода:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

input[type=»radio»]:checked + label {
background: #e83737;
color: #fff;
border-color: #e83737;
}

input[type=»radio»]:checked + label {

  background: #e83737;

  color: #fff;

  border-color: #e83737;

}

Эти стили используются для замены стилей по умолчанию для лейблов с выбранными радиокнопками (у нас их 4). Я использовал смежные селекторы, чтобы определить из всех инпутов радиокнопки. Свойствам присвоено значение #e83737, цвет #fff.

Ничего сверх сложного. Оставшиеся элементы обернуты DIV’ом.

<div>
<div>
<h2>Cool stuff with CSS only!</h2>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</div>

<div>

  <div>

    <h2>Cool stuff with CSS only!</h2>

    <p>Lorem ipsum dolor sit amet…</p>

  </div>

</div>

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

Итак, основной контент обернут в div с классом class=»main-wrapper». И, как вы увидите позже, чтобы изменить стили этого DIV’а, нам нужно будет написать что-то похожее:

input[type=»checkbox»]:checked ~ main-wrapper {
/* стили */
}

input[type=»checkbox»]:checked ~ main-wrapper {

  /* стили */

}

Чтобы выбрать главный DIV мы используем селектор ~.

Клик по иконке настроек

По клику должен появляться блок настроек. Код ниже позволяет это сделать:

.settings-btn:checked + label {
right: 200px; /* совпадает с шириной .buttons-wrapper */
}

.settings-btn:checked ~ .buttons-wrapper {
right: 0;
}

.settings-btn:checked ~ .layout-buttons {
right: 30px;
}

.settings-btn:checked + label {

  right: 200px; /* совпадает с шириной .buttons-wrapper */

}

 

.settings-btn:checked ~ .buttons-wrapper {

  right: 0;

}

 

.settings-btn:checked ~ .layout-buttons {

  right: 30px;

}

Когда пользователь кликает на иконку настроек, будет выбран чекбокс с id=»settings-btn». После нажатия происходит следующее:

Селектор смежных элементов (+) заставляет лэйблы выезжать на 200px после того, как будут выбраны чекбоксы.

Селектор ~ заставляет выезжать элементы с классами «buttons-wrapper» и «layout-buttons» до значений 0 и 30px соответственно из правого края.

Оба селектора в нашем примере незаменимы, и без них ничего бы не работало.

Замена фона

Я напомню вам HTML радио кнопок:

<!—стили фона —>
<!—светлый фон (#eaeaea) —>
<input type=»radio» name=»layout» checked>
<label for=»light-layout»>
Light Background</label>
<!—и еще 3 радио кнопки/лейбла —>

<!—стили фона —>

<!—светлый фон (#eaeaea) —>

<input type=»radio» name=»layout» checked>

<label for=»light-layout»>

Light Background</label>

<!—и еще 3 радио кнопки/лейбла —>

Мы будем менять фон у элемента .main-wrapper. CSS код:

.light-layout:checked ~ .main-wrapper {
background: #eaeaea;
}
.dark-layout:checked ~ .main-wrapper {
background: #494949;
}
.image-layout:checked ~ .main-wrapper {
background: url(image url) no-repeat center 0 fixed;
}
.pattern-layout:checked ~ .main-wrapper {
background: url(images/pattern1.png) repeat;
}

.light-layout:checked ~ .main-wrapper {

  background: #eaeaea;

}

.dark-layout:checked ~ .main-wrapper {

  background: #494949;

}

.image-layout:checked ~ .main-wrapper {

  background: url(image url) no-repeat center 0 fixed;

}

.pattern-layout:checked ~ .main-wrapper {

  background: url(images/pattern1.png) repeat;

}

По HTML коду мы имеем 4 набора инпутов типа type=»radio» и 4 лейбла. По клику на любой лейбл будет выбран связанный с ним инпут, а значит сработает псевдокласс :checked. Затем в зависимости от выбранного лейбла будет применен один из четырех стилей к блоку-обертке.

Прячем/показываем контент

Я использую чекбокс для отображения и скрытия контента:

<!— показать/скрыть контент —>
<input type=»checkbox»>
<label for=»hide-show-content»>
Hide/Show content</label>

<!— показать/скрыть контент —>

<input type=»checkbox»>

<label for=»hide-show-content»>

Hide/Show content</label>

.hide-show-content:checked ~ .main-wrapper .content {
display: none;
}

.hide-show-content:checked ~ .main-wrapper .content {

  display: none;

}

В этом случае, когда пользователь кликает на соответствующий лейбл, тем самым выбирая чекбокс, мы даем браузеру команду выбрать элемент с классом class=»content» и установить значение display: none.

Заключение

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

Автор: Omar Wraikat

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

Мы все хорошо знакомы с HTML чекбоксами и радиокнопками. Больше всего расстраивает то, что нет способа изменить их внешний вид. Они могут выглядеть по-другому в зависимости от вашей операционной системы или браузера, но мы не можем изменить их используя CSS.

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


Скройте чекбоксы

Это может показаться нелогичным, но чтобы наши чекбоксы и переключатели выглядели великолепно, мы должны скрыть их и забыть о них! Теперь мы не нуждаемся в них, для того чтобы прикрепить что-то рядом, поэтому допишем следующие стили.

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

Вы можете спросить, а что же мы будем делать без них? Но не переживайте, мы сделаем наши собственные чекбоксы.


Радиокнопки

Во-первых, вот наша разметка:

<section>
    <div>
      <input type="radio" name="group1">
      <label for="radio-1"><span>Coffee</span></label>
    </div>
    <div>
      <input type="radio" name="group1">
      <label for="radio-2"><span>Tea</span></label>
    </div>
    <div>
      <input type="radio" name="group1">
      <label for="radio-3"><span>Cappuccino</span></label>
    </div>
</section>

Теперь у нас есть раздел с тремя радиокнопками. Мы рассмотрим чекбоксы чуть позже в этом посте, по тому же принципу. Каждый input обернут в div с классом container. Кроме того, каждый input имеет label со span в нём.

Важно!

Поскольку мы скрыли входы радио и чекбоксов, единственный способ для нас получить к ним доступ — использовать label тег. Для правильной работы тег label должен содержать атрибут «for» с идентификатором соответствующего ввода. Если вход имеет идентификатор «radio-1», то атрибут «for» также должен быть «radio-1». Вы можете удивиться, почему текст внутри каждого label обернут в span:

<div>
      <input type="radio" name="group1">
      <label for="radio-1"><span>Coffee</span></label>
</div>

Так как мы собираемся стилить кнопки с псевдоэлементами «::before и «::after, нам понадобиться родительский элемент, на основе которого они могут быть расположены. В этом случае это будет наш label:

.container label {
  position: relative;
}

Вот стили, которые подходят как для чекбоксов, так и для радиокнопок:

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Свойства top и bottom установлены на ноль и объединены с «margin: auto;» это позволяет нашим элементам иметь центральное горизонтальное положение.

Вот как выглядят остальные стили:

.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

Самая важная часть — последний набор правил, в котором в основном и заключается вся фишка. Псевдокласс «: checked» позволяет нам вносить изменения в элементы при проверке ввода. С помощью селектора ‘+’ мы можем выбрать следующий родственный элемент и нацелить наш «span.radio», где мы применяем новые правила к псевдоэлементу «:: after». В этом случае мы меняем его горизонтальное положение и цвет. Чтобы сделать переключение плавным, мы назначаем переход 0,25 секунды для свойства left и background-color. Теперь, когда мы нажимаем переключатель, переключатель движется плавно, а не быстро.


Чекбоксы

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

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

Единственная разница в том, что мы будем использовать иконку из семейства FontAwesome, в качестве нашего псевдоэлемента «::after». По умолчанию она прозрачная, но когда флажок установлен, иконка станет синей.

Отдельно

Если вы хотите использовать иконку FontAwesome в своем псевдоэлементе, вы должны включить её код в свойство content и указать свойство font-family как «FontAwesome». Например:

{
content: '\f00c';
font-family: 'FontAwesome';
}

Коду «f00c» предшествует обратный слеш, который нужен для отображения символа Юникода.

Юникод можно найти на странице выбранной вами иконки:


Финал

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

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


***

Надеюсь, в этом посте вы нашли полезную и понятную для себя информацию. Буду рада вашим комментариям 🙂

Псевдо-checkbox на чистом CSS без фоновых изображений

Как сделать красивый стилизованный чекбокс и при этом не написать ни строчки javascript и не искать иконки.

это обычный чекбокс

а это — стилизованный

Вот как выглядит код стилизованного чекбокса:

<label>
    <input type=»checkbox»>
    <span>а это — стилизованный</span>
</label>

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

.pseudocheckbox::before {  
    content: «\00A0»;
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 2px solid #B0B0B0;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: baseline;
   
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    color: #808080;
}

input[type=checkbox]:checked + .pseudocheckbox::before { content: «\2713»; }

Разберем этот код подробно.

Задействуем <label>

Для начала нужно скрыть сам чекбокс:

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

Его и относящийся к нему текст нужно заключить в label, чтобы клик мыши по тексту приводил к изменению состояния чекбокса:

<label>
    <input type=»checkbox»>
    <span>а это — стилизованный</span>
</label>

Мы, однако, не только поместили текст внутрь <label>, но и обернули его в <span>. Для чего же это нужно?

Селектор соседа и псевдокласс :checked

В CSS есть селектор соседа. Он позволяет применить стили к указанному элементу только в том случае, если прямо перед ним есть некоторый другой элемент. Записывается он с помощью символа + и выглядит, например, вот так:

input[type=checkbox] + span { (правила) }

Вышеуказанная запись означает: применить правила ко всем <span>, перед которыми есть <input type=»checkbox»>.

С помощью подобного выражения можно провернуть одну хитрость: ограничить предшествующие элементы только теми чекбоксами, которые «включены». Это нам позволит сделать псевдокласс :checked:

input[type=checkbox]:checked + span { (правила) }

Такая запись позволяет визуально выделить конкретно те <span>, которые следуют за включенными чекбоксами. Эффект от такого выделения иллюстрирует простейший пример:

<label>
    <input type=»checkbox»>
    <span>щелкни по мне</span>
</label>

input[type=checkbox]:checked + span { font-weight: bold; }

Вот как получится:

щелкни по мне

(Заметим, что <span> вместе с <input type=checkbox> находится внутри <label>, поэтому клик по нему приводит к изменению состояния <input>.)

Селектор в исходном примере выглядит немного по-другому: не
input[type=checkbox]:checked + span, а
input[type=checkbox]:checked + .pseudocheckbox. По такому селектору браузер быстрее найдет нужный элемент: ему легче искать среди элементов класса pseudocheckbox, чем среди всех <span>. Так что класс добавлен для повышения производительности и никакой другой смысловой нагрузки не несет.

Стилизуем ::before

Вернемся к нашей задаче. Нам требуется не выделять сам <span>, а добиться, чтобы слева от него появилось нечто похожее на переключатель. Для этого нам поможет псевдоэлемент ::before.

::before — это способ дописать что-то в элемент непосредственно перед его содержимым средствами CSS.

<div>раз</div>
<div>два</div>

div::before { content: «Это ::before «; }

Современные браузеры позволяют стилизовать ::before так же, как это делается для обычных HTML-элементов: задавать размеры и отступы, добавлять границы, фон и т.д. Это позволит нам придать ему вид квадратика с рамкой, похожего на переключатель. Взглянем еще раз на правила для него и разберемся, для чего нужно каждое из них:

.pseudocheckbox::before {  
    content: «\00A0»;
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 2px solid #B0B0B0;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: baseline;
   
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    color: #808080;
}

content — свойство, необходимое псевдоэлементу, чтобы он проявился. Достаточно даже пустой строки. Но мы используем неразрывный пробел (об этом будет рассказано ниже). Его шестнадцатеричный код — 00A0:

content: «\00A0»;

Нужно задать нашему «квадратику» ширину и высоту. Чтобы они подействовали, необходимо также указать display: inline-block; (по умолчанию у ::before — inline):

display: inline-block;
width: 20px;
height: 20px;

Удобней, чтобы ширина и высота рассчитывались с учетом толщины границ:

box-sizing: border-box;

Которые тут же и укажем вместе с закруглениями для красоты:

border: 2px solid #B0B0B0;
border-radius: 2px;

И добавим небольшой отступ от текста:

margin-right: 6px;

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

vertical-align: baseline;

В случае самого «квадратика» текстом является неразрывный пробел. Если бы текста внутри не было (content: «»), такое выравнивание не подействовало бы. Вот почему в content именно неразрывный пробел, а не пустая строка: выглядят они одинаково, а действуют в данном случае по-разному.

Остальные свойства относятся к переключателю в состоянии «включено».

Состояние «включено» и Unicode-символ «галочка»

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

input[type=checkbox]:checked + .pseudocheckbox::before { … }

Отмеченный переключатель обычно имеет внутри «галочку». Здесь нам на помощь приходит разнообразие символов Unicode, которое выходят далеко за пределы собственно букв и цифр. Есть среди этого многообразия и несколько значков для «галочки». Код значка мы запишем в свойство content:

input[type=checkbox]:checked + .pseudocheckbox::before { content: «\2714»; }

В результате «галочка» будет вписана во все «квадратики» рядом с отмеченными чекбоксами, чего мы и добивалсь. Однако, не стоит забывать, что технически такая «галочка» — это обычный текстовый символ, который самостоятельно может и не выглядеть ровно так, как надо, и ему нужно ему в этом немного помочь.

Центрируем по горизонтали:

text-align: center;

В разных шрифтах символ «галочки» может выглядеть немного по-разному, поэтому для ясности выбираем какой-то один и указываем его явно. Также подбираем размер:

    font-family: Arial, sans-serif;
font-size: 16px;

Кроме размера нужно добиться необходимого положения символа внутри квадратика по вертикальной оси. Лучше всего это делать с помощью line-height:

line-height: 16px;

line-height нужно подбирать индивидуально для каждого сочетания размера и семейства шрифта.

При выравнивании по базовой линии текста (vertical-align: baseline) именно значение line-height определеяет, где, собственно, будет нижняя граница текста у «квадратика». Если эти значения у отмеченного и неотмеченного будут отличаться, то они окажутся выровненными по-разному (так может получиться, например, если явно указать line-height только у отмеченного). Поэтому line-height лучше указывать в общем блоке стилей для ::before.

line-height обычно подбирают вместе с font-size, поэтому его удобно иметь в блоке стилей рядом. font-size, в свою очередь, может подбираться вместе с другими параметрами текста. Так что все их удобней перенести в общий блок для ::before, хотя, на первый взгляд, правила стилизации текста там выглядит нелогично, т.к. самого текста там нет.

Напоследок добавим жирность и укажем цвет:

font-weight: bold;
color: #808080;


© Все права на данную статью принадлежат порталу webew.ru.
Перепечатка в интернет-изданиях разрешается только с указанием автора
и прямой ссылки на оригинальную статью. Перепечатка в печатных
изданиях допускается только с разрешения редакции.

: проверено — CSS: каскадные таблицы стилей

Селектор псевдокласса : checked CSS представляет любое радио ( ), флажок ( ) или вариант ( в

CSS
  дел,
Выбрать {
  маржа: 8 пикселей;
}


input: checked + label {
  красный цвет;
}


input [type = "radio"]: проверено {
  box-shadow: 0 0 0 3px оранжевый;
}


input [type = "checkbox"]: проверено {
  box-shadow: 0 0 0 3px hotpink;
}


option: checked {
  box-shadow: 0 0 0 3px лайм;
  красный цвет;
}
  
Результат

Переключение элементов со скрытым флажком

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

HTML
  

<таблица>
  
      Столбец №1   Столбец №2   Столбец №3  
  
  
      [дополнительный текст]   [дополнительный текст]   [дополнительный текст]  
      [текст ячейки]   [текст ячейки]   [текст ячейки]  
      [текст ячейки]   [текст ячейки]   [текст ячейки]  
      [дополнительный текст]   [дополнительный текст]   [дополнительный текст]  
      [дополнительный текст]   [дополнительный текст]   [дополнительный текст]  
  



  
CSS
 
# expand-toggle {
  дисплей: нет;
}


.расширяемый {
  видимость: коллапс;
  фон: #ddd;
}


# expand-btn {
  дисплей: встроенный блок;
  маржа сверху: 12 пикселей;
  отступ: 5 пикселей 11 пикселей;
  цвет фона: # ff7;
  граница: сплошная 1px;
  радиус границы: 3 пикселя;
}


# expand-toggle: проверено ~ * .expandable {
  видимость: видимая;
}


# expand-toggle: проверено ~ # expand-btn {
  цвет фона: #ccc;
}  
Результат

Галерея изображений

Псевдокласс : checked можно использовать для создания галереи изображений с полноразмерными изображениями, которые отображаются только тогда, когда пользователь щелкает миниатюру.См. Эту демонстрацию для возможной подсказки.

Примечание: Для аналогичного эффекта, но на основе псевдокласса : hover и без скрытых радиобоксов, см. Эту демонстрацию, взятую со справочной страницы: hover.

таблицы BCD загружаются только в браузере

форм — селектор CSS для метки отмеченного переключателя

Я забыл, где я впервые увидел это упомянутое, но вы действительно можете встроить свои метки в контейнер в другом месте, если у вас установлен атрибут for = .Итак, давайте проверим образец на SO:

  * {
  отступ: 0;
  маржа: 0;
  цвет фона: # 262626;
  цвет белый;
}

.переключатель {
  дисплей: нет;
}

#filter {
  дисплей: гибкий;
  justify-content: center;
}

.filter-label {
  дисплей: встроенный блок;
  граница: сплошной зеленый цвет 4px;
  отступ: 10 пикселей 20 пикселей;
  размер шрифта: 1.4em;
  выравнивание текста: центр;
  курсор: указатель;
}

основной {
  ясно: слева;
}

.содержание {
  обивка: 3% 10%;
  дисплей: нет;
}

h2 {
  размер шрифта: 2em;
}

.Дата {
  отступ: 5 пикселей 30 пикселей;
  стиль шрифта: курсив;
}

.filter-label: hover {
  цвет фона: # 505050;
}

# Feature-radio: проверено ~ # filter .featured,
# personal-radio: проверено ~ # filter .personal,
# tech-radio: проверено ~ # filter .tech {
  цвет фона: зеленый;
}

# Feature-radio: checked ~ main .featured {
  дисплей: блок;
}

# personal-radio: проверено ~ main.Personal {
  дисплей: блок;
}

# tech-radio: проверено ~ main .tech {
  дисплей: блок;
}  
  



<заголовок>
  
  
  


<основной>
  <статья>
    <заголовок>
      

Крутые штуки

Сегодня

Я показываю классные вещи в этой статье!

<статья> <заголовок>

Не так круто

Вторник

По какой-то причине это не так круто :(;

<статья> <заголовок>

Классная техническая статья

В прошлый понедельник

В этой статье есть много интересного!

<статья> <заголовок>

Классная личная статья

Две пятницы назад

В этой статье рассказывается о том, как я устроился на работу в крутой стартап, потому что я рок!

Уф.Это было много для «образца», но я чувствую, что это действительно подчеркивает эффект и суть: мы определенно можем выбрать метку для проверенного элемента управления вводом, не являясь родственником. Секрет заключается в том, что сохраняет теги input дочерними только для того, чем они должны быть (в данном случае — только для элемента body ) .

Поскольку элемент label фактически не использует псевдоселектор : checked , не имеет значения, что метки хранятся в заголовке .Дополнительное преимущество состоит в том, что, поскольку заголовок является родственным элементом, мы можем использовать общий родственный селектор ~ для перехода от входа [type = radio]: проверено DOM-элемента в контейнер заголовка , а затем используйте селекторы потомков / потомков для доступа к меткам сами, дает возможность стилизовать их, когда их соответствующие переключатели / флажки выбраны .

Мы можем не только стилизовать метки, но также стили другого контента, который может быть потомком одноуровневого контейнера относительно всех входных s.А теперь, пока вы все ждали, JSFIDDLE! Идите туда, поиграйте с ним, заставьте его работать на вас, узнайте, почему он работает, сломайте его, делайте то, что вы делаете!

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

html - Как выбрать метку для установленного флажка с помощью CSS?

html - Как выбрать метку для установленного флажка с помощью CSS? - Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено
3к раз

Я составляю конструктор строк на стороне сервера (код HTML) и с помощью ajax отправляю ответ функции jquery, которая помещает этот HTML на место.На стороне сервера решается, какой флажок будет отмечен. Все идет нормально.

Я хотел бы выбрать метки для отмеченных флажков и изменить цвет, чтобы отмеченные страны были по-разному окрашены. Моя проблема в том, что я не могу выбрать нужные метки и изменить свойство цвета. Я пробовал с тем, что вы видите, и, конечно же, используя классы и + и > и : до и другие странные вещи ...

Итак, как их выбрать и изменить какое-либо свойство на этикетке?

Я хотел бы сделать это с помощью CSS, я знаю, как это сделать с помощью jquery, но это кажется неправильным.

  label + input.chkCountry [type = "checkbox"]: отмечено {color: green;}  
  

SuperDJ

6,31777 золотых знаков3636 серебряных знаков6262 бронзовых знака

Создан 22 янв.

dllhelldllhell

1,94212 золотых знаков3434 серебряных знака4646 бронзовых знаков

Вам нужно только изменить HTML и селектор.В CSS метка не знает, установлен ли флажок, поэтому вам нужно перевернуть его. В HTML ввод не должен быть в элементе label .

  input.chkCountry [type = "checkbox"]: отмечено + label {color: green;}
/ * input: checked + label {color: green;} / * Короткий селектор * /  
  

Создан 22 янв.

SuperDJ

6,31777 золотых знаков3636 серебряных знаков6262 бронзовых знака

4

Следуйте приведенному ниже примеру кода

  input [type = "checkbox"]: проверено ~ label {
    цвет: зеленый;
}  
  

Вам нужно будет переместить метку после флажка в вашем HTML.

Даут

2,18011 золотых знаков1717 серебряных знаков3232 бронзовых знака

Создан 22 янв.

Попробуйте так:

 .chkCountry: checked + .lblCountry {
  цвет: зеленый;
}  
  

Создан 22 янв.

Парфо63

2,84822 золотых знака1818 серебряных знаков3131 бронзовый знак

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css html или задайте свой вопрос.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Создание переключателя стилей с использованием чистого CSS Использование: проверено

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

Когда дело доходит до подходов, основанных только на CSS, мы не можем игнорировать селектор псевдокласса : checked , который я собираюсь использовать в этом посте. Конечно, я не первый, кто писал об этой технике, и были и другие более обширные дискуссии об использовании элементов формы в качестве замены JavaScript.Например, эта статья Луи Лазариса в Adobe и великолепное слайд-шоу Райана Седдона.

Используя

: проверил

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

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

См. Переключатель стилей Pen A с чистым CSS, используя: проверено SitePoint (@SitePoint) на CodePen.

А теперь приступим.

Создание окна настроек

В демонстрации вы должны были заметить значок шестеренки и то, как при нажатии появляется поле с некоторыми параметрами. Прежде чем мы продолжим объяснять HTML и CSS, из которых состоит этот блок, взгляните на следующий код:

 
input [type = "checkbox"], input [type = "radio"] {
  позиция: абсолютная;
  видимость: скрыта;
}

.settings-box-element {
  z-индекс: 10;
}  

Поскольку нас интересует только отображение меток, приведенный выше код используется для скрытия флажков и переключателей.Более того, все метки имеют класс settings-box-element со свойством z-index , чтобы гарантировать, что метки останутся поверх любых других элементов на странице.

Теперь мы можем разобрать код, из которого состоит окно настроек. Начнем с кнопки шестеренки. Вот HTML:

 

  

И CSS:

  .settings-btn + label {
  положение: фиксированное;
  верх: 130 пикселей;
  справа: 0;
  дисплей: блок;
  ширина: 35 пикселей;
  цвет: # e83737;
  выравнивание текста: центр;
  фон: #fff;
  курсор: указатель;
}  

Если вы прочитали пару статей об использовании элементов формы в качестве замены JavaScript, то вы уже должны знать, что нам нужно использовать элементы ввода и метки вместе, так что если один из двух будет удален, ничего не будет работать.Итак, у нас есть поле для флажка с id = "settings-btn" и метка с для атрибута , который соответствует значению id . Я также добавил класс settings-btn для использования в нашем CSS-хуке.

В CSS метке дается объявление position: fixed с соответствующими свойствами / значениями направления (вверху и справа).

Далее идет белое поле, которое будет фактически содержать кнопки:

Первый HTML:

 

И CSS:

 .button-wrapper {
  положение: фиксированное;
  верх: 130 пикселей;
  вправо: -200 пикселей;
  ширина: 200 пикселей;
  высота: 240 пикселей;
  фон: #fff;
}  

Блок представляет собой единственный элемент div с классами «buttons-wrapper» и «settings-box-element». Как я сказал ранее, последний класс в основном используется для присвоения элементам значения z-index . «Button-wrapper» используется для стилизации элемента div . И, как вы можете видеть, div получил ширину 200 пикселей и высоту 240 пикселей для размещения 5 кнопок, которые вы видите в демонстрации.Кроме того, div получает позицию , значение fixed и соответствующие right и top свойства. Единственное, что вам нужно иметь в виду, это то, что свойство right должно иметь то же значение, что и ширина, но иметь отрицательное значение (чтобы оно исчезло из области просмотра).

Теперь посмотрим на код оставшейся разметки, то есть 5 кнопок. Комментарии обозначают стили фона, которыми они управляют:

 












    





  

А вот CSS:

 .layout-buttons {
  дисплей: блок;
  ширина: 150 пикселей;
  отступ: 10 пикселей 0;
  выравнивание текста: центр;
  граница: сплошной черный цвет 2px;
  размер коробки: рамка-рамка;
  размер шрифта: 0,875em;
  курсор: указатель;
}

.light-layout + label {
  положение: фиксированное;
  верх: 140 пикселей;
  вправо: -150 пикселей;
}

.dark-layout + label {
  положение: фиксированное;
  верх: 185 пикселей;
  вправо: -150 пикселей;
}

.image-layout + label {
  положение: фиксированное;
  верх: 230 пикселей;
  вправо: -150 пикселей;
}

.pattern-layout + label {
  положение: фиксированное;
  верх: 275 пикселей;
  вправо: -150 пикселей;
}

.hide-show-content + label {
  положение: фиксированное;
  верх: 320 пикселей;
  вправо: -150 пикселей;
}  

Обратите внимание, что первый флажок получил атрибут «проверено».Это потому, что мы хотим, чтобы он был выделен по умолчанию.

Каждое поле ввода имеет id , и каждая метка имеет для атрибута , который соответствует id для одного из полей ввода. И, как вы можете знать или не знать, секрет такой техники заключается в атрибуте для , потому что, когда щелкают метку с атрибутом для , элемент, связанный с этой конкретной меткой, будет выбран / проверен и поэтому это позволяет нам использовать селектор : checked .

Все вышеперечисленные ярлыки имеют класс «кнопок-раскладок». Этот класс используется для присвоения кнопкам стандартных и общих стилей, таких как ширина, отступ, границы и т. Д. Другие классы используются для добавления уникальных стилей к каждому из них. И, как вы видели для значка шестеренки и белого поля, свойство position используется со значением fixed и соответствующими свойствами top и right . Обратите внимание, что значение top для каждой метки на 45 пикселей больше, чем предыдущее; это сделано для того, чтобы кнопки располагались друг над другом красиво и без наложений.Также обратите внимание, что значение свойства right совпадает с шириной кнопок, но имеет отрицательное значение.

Теперь взглянем на последнюю часть нашего кода CSS:

  input [type = "radio"]: checked + label {
  фон: # e83737;
  цвет: #fff;
  цвет границы: # e83737;
}  

Приведенный выше CSS используется для изменения стилей по умолчанию для метки, связанной с выбранной радиокнопкой (у нас есть 4 радиокнопки). Я использовал соседний родственный селектор, чтобы нацелить каждую метку, которой предшествует поле ввода типа «радио».Как видите, свойствам background и border было присвоено значение # e83737 (красноватый цвет), а свойству color - значение #fff . Ничего особенного или сложного.

Остальные элементы HTML будут заключены в div :

  

Классные штуки только с CSS!

Lorem ipsum dolor sit amet ...

Обратите внимание, что в приведенном выше коде я позиционировал каждый элемент окна настроек независимо, где я мог просто обернуть их все внутри элемента div или section и расположить этот единственный элемент, что упростило задачу.Это делается просто потому, что вы не можете выбрать родительский элемент, а можете выбрать только его.

Итак, в этом случае весь основной контент заключен в div с class = "main-wrapper" . И, как вы увидите позже, чтобы иметь возможность изменять стили для этого div , нам нужно будет выбрать этот div , написав что-то вроде этого:

  input [type = "checkbox"]: checked ~ main-wrapper {
  
}  

Здесь я использую общий родственный селектор, чтобы выбрать основной div , и это единственный способ сделать это.

Щелчок по значку шестеренки

При нажатии на значок шестеренки должно появиться окно настроек. Вот код, чтобы это произошло:

  .settings-btn: checked + label {
  вправо: 200 пикселей;
}

.settings-btn: checked ~ .buttons-wrapper {
  справа: 0;
}

.settings-btn: проверено ~ .layout-buttons {
  вправо: 30 пикселей;
}  

Когда пользователь нажимает на значок шестеренки, будет установлен флажок с id = "settings-btn" , и здесь начинается волшебство. После нажатия на значок шестеренки произойдет следующее:

  1. Используя соседний родственный селектор ( + ), метка, которая идет сразу после этого флажка, будет выбрана, а затем перемещена на 200 пикселей от правого края области просмотра.

  2. Используя общий родственный селектор ~ , элементы с классами «buttons-wrapper» и «layout-buttons» будут выбраны и затем перемещены так, чтобы они находились на 0 пикселей и 30 пикселей, соответственно, справа от области просмотра.

Здесь незаменимы как смежный селектор родственных объектов, так и общий родственный селектор, поскольку без них этот метод не будет работать.

Смена фона

Напомню HTML-код для переключателей:

 




  

Фон, который мы будем менять, - это фон .элемент main-wrapper . Вот CSS:

  .light-layout: checked ~ .main-wrapper {
  фон: #eaeaea;
}
.dark-layout: проверено ~ .main-wrapper {
  фон: # 494949;
}
.image-layout: проверено ~ .main-wrapper {
  фон: url (url изображения) центр без повтора 0 исправлен;
}
.pattern-layout: проверено ~ .main-wrapper {
  фон: url (images / pattern1.png) повторять;
}  

Вы можете видеть, что в HTML у нас есть 4 элемента ввода type = "radio" и 4 метки.При щелчке по любой из меток будет выбран вход, связанный с этой конкретной меткой, и поэтому ему будет соответствовать псевдокласс : checked . Затем, в зависимости от того, какая метка нажата, к основной оболочке будет применен один из четырех вышеперечисленных стилей.

Скрытие / отображение содержимого

Для элемента "показать / скрыть" я использую флажок:

 

  

А вот CSS:

 .hide-show-content: проверено ~ .main-wrapper .content {
  дисплей: нет;
}  

В этом случае мы говорим браузеру выбрать элемент с class = "content" и установить для него значение display: none ”, когда пользователь щелкает по ассоциированной метке, тем самым устанавливая флажок.

Заключение

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

Ниже вы найдете законченную демонстрацию:

См. Переключатель стилей Pen A с чистым CSS, используя: проверено SitePoint (@SitePoint) на CodePen.

Как стилизовать выбранную метку радиокнопки

Решение с CSS: псевдокласс checked checked

Прежде всего, вам нужно скрыть начальные круглые кнопки, установив для свойства CSS display значение «none». Затем настройте ярлыки так, как вы хотите, чтобы они были по умолчанию, когда они не выбраны. В нашем примере мы устанавливаем отображение наших меток на «встроенный блок», а затем продолжаем стилизацию, задав свойства background-color, padding, font-family, font-size и cursor.

После этого вы можете стилизовать выбранный элемент

Пример стилизации выбранной метки переключателя: ¶

  

  
     Название документа 
    <стиль>
      .radio-button input [type = "radio"] {
        дисплей: нет;
      }
      .радио-кнопка label {
        дисплей: встроенный блок;
        цвет фона: # d1d1d1;
        отступ: 4px 11px;
        семейство шрифтов: Arial;
        размер шрифта: 18 пикселей;
        курсор: указатель;
      }
      .radio-button input [type = "radio"]: проверено + метка {
        цвет фона: # 76cf9f;
      }
    
  
  
    

Попробуйте сами »

Результат¶

В нашем следующем примере мы добавляем поле к классу« радио-кнопки », а затем скрываем круглые кнопки, но иначе, чем в предыдущем примере.Для этого мы устанавливаем для свойств непрозрачности и ширины значение 0 и используем "фиксированное" значение свойства position.

Из соображений доступности мы меняем внешний вид, когда кнопка получает фокус, в результате чего рамка в фокусе становится пунктирной. Этот прием также позволит изменять выделение с помощью стрелок влево и вправо. Мы также добавляем эффект наведения с помощью псевдокласса CSS: hover, чтобы при наведении курсора на другие параметры они меняли внешний вид.

Пример стилизации выбранной метки переключателя с эффектом наведения: ¶

  

  
     Название документа 
    <стиль>
      .переключатель {
        маржа: 15 пикселей;
      }
      .radio-button input [type = "radio"] {
        непрозрачность: 0;
        положение: фиксированное;
        ширина: 0;
      }
      .radio-button label {
        дисплей: встроенный блок;
        цвет фона: # d1d1d1;
        отступ: 10 пикселей 20 пикселей;
        семейство шрифтов: без засечек, Arial;
        размер шрифта: 16 пикселей;
        граница: 1px solid # 666;
        радиус границы: 4 пикселя;
      }
      .название радио-кнопки: hover {
        цвет фона: # b1e3c1;
      }
      .radio-button input [type = "radio"]: focus + label {
        граница: 2px пунктирная # 666;
      }
      .radio-button input [type = "radio"]: проверено + метка {
        цвет фона: # 76cf9f;
        цвет границы: # 666;
      }
    
  
  
    

Попробуйте сами »

Флажок Обман с блоком CSS / кодера

Флажки - это здорово.Объедините их с правильным CSS, и вы сможете реализовать несколько действительно изящных трюков. Эта статья призвана продемонстрировать некоторые творческие возможности, которые вы можете делать с помощью флажков. Читайте и помните, что в демонстрациях в этой статье используется без JavaScript .

Все начинается с HTML.

   

Тут ничего хитрого. Атрибут для на совпадает с id на , поэтому нажатие на переключит флажок .Это важно, потому что наш следующий шаг - скрыть .

  ввод {
положение: абсолютное;
слева: -9999 пикселей;
}

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

Скрытие позволяет нам заниматься своими делами. Нам все еще нужно передать состояние отмеченного / снятого флажка, но мы можем сделать это с помощью .Здесь начинается вечеринка.

  input: checked + label {
}

Мы используем комбинацию псевдокласса : checked и соседнего родственного селектора + , чтобы сказать «когда флажок установлен, найдите < label> сразу после него и примените классные стили ». Вы даже можете использовать псевдоэлементы ( :: before и :: after ) в пределах для большей свободы творчества.

  input: checked + label :: before {
}

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

См. Обман с флажком пера: простое переключение Уилла Бойда (@lonekorean) на CodePen.

Самое приятное то, что они все еще галочки. Оберните их в

, и они отправят так, как вы ожидаете. Мы меняем внешность, но не поведение.

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

См. Обман с флажком пера: раскрытие формы Уиллом Бойдом (@lonekorean) на CodePen.

Псевдокласс : checked работает с переключателями так же, как и с флажками. Имея это в виду, вот HTML-код "Как вы узнали о нас?" Радио-кнопки.

   


< label for = "how-internet"> Где-то в Интернете





Переключатель индикаторы отображаются в пределах <метка> с использованием комбинации :: до (для внешнего кольца) и :: после (для зеленой точки). Показать / скрыть :: после , когда переключатель установлен / не отмечен, достаточно просто.

 .боковая метка :: после {
отображение: нет;


}

ввод: проверено + .side-label :: after {
display: block;
}

скрыт до тех пор, пока не будет установлен переключатель «Другое…». Я скрываю

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

при установленном переключателе выглядит следующим образом.

  # how-other: checked ~ .how-other-disclosure {
display: block;
}

До сих пор мы использовали селектор смежных братьев + , но на этот раз мы используем общий селектор ~ . Он похож, но может находить несмежных братьев и сестер, например

.

Мы можем повторно использовать методы из предыдущей демонстрации для создания виджета в виде дерева папок, который имеет аналогичное поведение скрытия / отображения.

См. Обман с флажком пера: дерево папок Уилла Бойда (@lonekorean) на CodePen.

HTML для отдельной папки приведен ниже. - это папка, а два элемента - это «файлы» в ней.

    

Значки Font Awesome используются для обозначения отмеченного (открытого) и непроверенного (закрытого) состояний.

  label :: before, a :: before {
display: block;
позиция: абсолютная;
верх: 6 пикселей;
слева: -25 пикселей; Семейство шрифтов
: 'FontAwesome';
}

label :: before {
content: '\ f07b';
}

input: checked + label :: before {
content: '\ f07c';
}

a :: before {
content: '\ f068';
}

Содержимое в папке переключается с помощью общего родственного селектора ~ . Вот почему в HTML есть дополнительные

оберток, чтобы этот селектор не «просачивался» и не открывал родственные папки.

  вход: проверено ~ .sub {
дисплей: блок;
}

Естественно, папки могут быть вложенными. Просто перетащите HTML-код другой папки в

. Щелкните папку «Многоцветный» в демонстрации, чтобы увидеть пример.

Наконец, давайте поговорим о кнопке сброса.

    

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

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

См. Обман с флажком пера: список дел Уилла Бойда (@lonekorean) на CodePen.

Обновление: некоторые люди отметили, что по соглашению флажки должны быть квадратными, в отличие от того, что я сделал в этой демонстрации. Они не ошибаются.

HTML выглядит так.

  




Механизм разделения списков достигается с помощью CSS flexbox.Вот соответствующий CSS.

  .items {
дисплей: гибкий;
flex-direction: столбец;
}

. Выполнено {
заказ: 1;
}

ввод: отмечено + метка {
заказ: 2;
}

. Невыполнено {
заказ: 3;
}

этикетка {
заказ: 4;
}

CSS flexbox позволяет напрямую переупорядочивать элементы с помощью свойства order . Значение порядка изменяется с 4 на 2 , когда его флажок установлен, перемещая его снизу «Не выполнено»

на место ниже «Готово»

.

К сожалению, навигация с помощью клавиатуры и многие программы чтения с экрана будут следовать порядку элементов в DOM, даже если они были визуально переупорядочены с помощью CSS flexbox. Это делает заголовки «Done» и «Not Done» бесполезными для программ чтения с экрана, поэтому я добавил к ним aria-hidden = «true» - лучше их игнорировать, чем вызывать путаницу. Кроме того, разделенный список по-прежнему полностью доступен через клавиатуру, и программы чтения с экрана по-прежнему будут сообщать о состоянии элемента (отмечен / не отмечен).

Если вас интересуют счетчики рядом с полями «Готово» и «Не выполнено», они генерируются с помощью счетчиков CSS. Прочтите эту статью, если хотите узнать больше.

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

См. Обман с флажком пера: групповой фильтр Уилла Бойда (@lonekorean) на CodePen.

Вот сокращенный HTML. Обратите внимание, что атрибут data-team представляет собой разделенный пробелами список атрибутов радио-кнопки id .Вот как мы сопоставляем персонажей командам.

   





  • Ангел




Относительно доступности , Я использую пустые атрибуты alt , потому что имена персонажей уже находятся в тегах

- нет смысла читать каждое имя дважды.Кроме того, поскольку я на самом деле не скрываю элементов (просто сжимаются и исчезают), это позволяет программам чтения с экрана пропускать невыделенные символы. Мне нужно только скрыть

.

Вот CSS, который выделяет персонажей, когда их команда выбрана.

  #original: checked ~ .characters [data-team ~ = "original"] h3, 
#force: checked ~ .characters [data-team ~ = "force"] h3,
#factor: checked ~ .characters [data-team ~ = "factor"] h3,
#hellfire: проверено ~.символы [data-team ~ = "hellfire"] h3 {
}

#original: checked ~ .characters [data-team ~ = "original"] img,
#force: checked ~ .characters [data-team ~ = " force "] img,
#factor: checked ~ .characters [data-team ~ =" factor "] img,
#hellfire: checked ~ .characters [data-team ~ =" hellfire "] img {
}

Я знаю, что эти селекторы выглядят волосатыми, но они не так уж и плохи. Давайте рассмотрим линию 1 в качестве примера. Говоря об этом, "когда проверяется элемент с id из 'original', ищите в элементе-брате 'characters' что-нибудь с атрибутом data-team , содержащим 'original', затем найдите

внутри.Повторите эти действия для «force», «factor» и «hellfire» в строках 2–4. Теперь повторите все это в строках 8-11, но для вместо

.

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

Стилизация флажков и переключателей с использованием CSS

Стилизация флажков и переключателей стала возможной с введением псевдокласса: checked в CSS3.На этой странице описываются два метода: метод на основе изображений, показанный в демонстрации ниже, и метод чистого CSS.

Скачать примеры

Архивы ниже содержат два набора файлов примеров, демонстрирующих методы стилизации на основе изображений и чистый CSS, описанные на этой странице.

Стиль на основе изображений

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

Для каждого флажка или переключателя используется HTML следующей формы:

1
2
3
4
 
  

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

Мы скрываем флажки и переключатели в таблице стилей:

1
2
3
4
5
6
7
 
  input [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ширина: 28 пикселей;
  маржа: 0;
  отступ: 0;
  непрозрачность: 0;
}
  

Селекторы в строках 1 и 2 используют псевдокласс отрицания, чтобы скрыть правило от старых браузеров.Строки 3–5 устанавливают ширину, поля и отступы, чтобы можно было точно позиционировать альтернативную графику.
Строка 6 устанавливает прозрачность, чтобы сделать стандартный пользовательский интерфейс невидимым.

Затем мы размещаем метку и отображаем непроверенное изображение:

1
2
3
4
5
6
7
8
 
  input [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  дисплей: встроенный блок;
  маржа слева: -28 пикселей;
  отступ слева: 28 пикселей;
  фон: url ('проверяет.png ') без повтора 0 0;
  высота строки: 24 пикселя;
}
  

Строка 3 устанавливает метку для отображения в виде встроенного блочного элемента, позволяя строке 7 установить ее высоту равной высоте альтернативной графики и центрировать текст по вертикали.
В строке 4 используется отрицательное поле, чтобы закрыть пространство, в котором будет отображаться стандартный пользовательский интерфейс, а в строке 5 затем используется заполнение, чтобы восстановить текст метки в правильном положении.
Значение 28 пикселей, используемое здесь и в предыдущем правиле, равно ширине изображения плюс некоторый дополнительный отступ, чтобы текст метки не располагался слишком близко к изображению.Строка 6 отображает непроверенное изображение в пространстве перед текстом метки.

Наконец, мы отображаем выбранные изображения, когда установлены флажки и переключатели:

1
2
3
4
5
6
7
 
  input [type = checkbox]: not (old): checked + label {
  background-position: 0 -24px;
}

input [type = radio]: not (old): checked + label {
  фоновая позиция: 0 -48 пикселей;
}
  

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

Стиль на чистом CSS

Приведенная ниже демонстрация оформлена исключительно с использованием CSS.
В отличие от метода на основе изображений, метод чистого CSS масштабируется с размером текста.

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

1
2
3
4
 
  

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

Мы скрываем флажки и переключатели в таблице стилей:

1
2
3
4
5
6
7
8
 
  input [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ширина: 2em;
  маржа: 0;
  отступ: 0;
  размер шрифта: 1em;
  непрозрачность: 0;
}
  

Этот метод такой же, как и в методе на основе изображений, но поскольку ширина устанавливается относительно размера шрифта в строке 3, мы должны восстановить размер шрифта в строке 6, поскольку браузеры используют меньший размер шрифта для флажков и переключателей с помощью По умолчанию.

Затем мы размещаем метку:

1
2
3
4
5
6
 
  input [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  дисплей: встроенный блок;
  маржа слева: -2em;
  высота строки: 1.5em;
}
  

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

Затем мы стилизуем первый диапазон, чтобы создать непроверенную графику:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
  input [type = checkbox]: not (old) + label> span,
input [type = radio]: not (old) + label> span {
  дисплей: встроенный блок;
  ширина: 0.875em;
  высота: 0,875em;
  маржа: 0,25em 0,5em 0,25em 0,25em;
  граница: 0,0625 мкм, сплошной RGB (192,192,192);
  радиус границы: 0,25 м;
  фон: rgb (224 224 224);
  фоновое изображение: -moz-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: -ms-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: -o-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: -webkit-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: линейный градиент (RGB (240,240,240), RGB (224,224,224));
  вертикальное выравнивание: снизу;
}
  

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

В этом примере градиент фона меняется на противоположный для выбранных флажков и переключателей:

1
2
3
4
5
6
7
8
 
  input [type = checkbox]: not (old): checked + label> span,
input [type = radio]: not (old): checked + label> span {
  фоновое изображение: -moz-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: -ms-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: -o-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: -webkit-linear-gradient (RGB (224, 224, 224), RGB (240, 240, 240));
  фоновое изображение: линейный градиент (RGB (224,224,224), RGB (240,240,240));
}
  

Затем мы отображаем галочку внутри выбранных флажков:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
  input [type = checkbox]: not (old): checked + label> span: before {
  содержание: '✓';
  дисплей: блок;
  ширина: 1em;
  цвет: rgb (153 204 102);
  размер шрифта: 0.875em;
  высота строки: 1em;
  выравнивание текста: центр;
  тень текста: 0 0 0,0714em rgb (115,153,77);
  font-weight: жирный;
}
  

Селектор в строке 1 использует псевдокласс: before, поэтому в строке 2 можно вставить символ галочки внутри элемента span.
В строках 3, 4, 6, 7 и 8 галочка отображается в центре элемента, а в строках 5, 9 и 10 делается стиль текста.

Наконец, мы отображаем «маркер» внутри выбранных переключателей, применяя те же методы, что и для непроверенной графики, ко второму элементу диапазона:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
  input [type = radio]: not (old): checked + label> span> span {
  дисплей: блок;
  ширина: 0.5em;
  высота: 0,5 мм;
  маржа: 0,125 эм;
  граница: 0,0625 мкм сплошной RGB (115,153,77);
  радиус границы: 0,125 м;
  фон: rgb (153 204 102);
  фоновое изображение: -moz-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: -ms-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: -o-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: -webkit-linear-gradient (RGB (179 217 140), RGB (153 204 102));
  фоновое изображение: линейный градиент (RGB (179 217 140), RGB (153 204 102));
}
  

.

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

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