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

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

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

HTML

<!—иконка шестеренки, открывает блок при клике на нее —>
<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;
}

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

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

HTML

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

CSS

.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>

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

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

Ничего сверх сложного. Оставшиеся элементы обернуты 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 {
/* стили */
}

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

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

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

.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 радио кнопки/лейбла —>

Мы будем менять фон у элемента .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;
}

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

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

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

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

.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 представляет любое радио ( ), флажок ( ) или вариант ( в ) элемент, который проверяется или переключается в состояние на . : checked { маржа слева: 25 пикселей; граница: сплошной синий 1px; } Пользователь может включить это состояние, отметив / выбрав элемент, или отключить его, сняв отметку / отменив выбор элемента. Примечание: Поскольку браузеры часто обрабатывают s как замененные элементы, степень, в которой они могут быть стилизованы с помощью псевдокласса : checked , варьируется от браузера к браузеру. Базовый пример HTML Да Нет