Псевдо-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. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.

Чекбокс | HTML | CodeBasics

В интернет-магазинах, часто, поиск реализуется с помощью указания категорий, в которых хотим искать товар. Для реализации множественного выбора существуют чекбоксы (или, как их ещё называют — флажки).

Чекбоксы позволяют выбирать множество элементов из представленных:

Хочу изучать HTML
Хочу изучать CSS
Хочу изучать JS
Хочу изучать другой язык

Для создания чекбокса используются два тега:

  • <input> с указанием type="checkbox"
  • <label>, в котором будет текст, связанный с нужным нам чекбоксом

Для создания связи <label> с <input> существует два способа:

  • Связь по id. Для этого необходимо задать уникальный id для <input> и связать <label> с чекбоксом с помощью атрибута for
<form>
  <input type="checkbox">
  <label for="html">Хочу изучать HTML</label>
</form>
  • Вложить <input> внутрь тега <label>. При этом указание уникального id не требуется
<form>
  <label>
    <input type="checkbox">
    Хочу изучать HTML
  </label>
</form>

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

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

<form>
  <label>
    <input type="checkbox" name="languages" value="HTML">
    Хочу изучать HTML
  </label>
  <br>
  <label>
    <input type="checkbox" name="languages" value="CSS">
    Хочу изучать CSS
  </label>
  <br>
  <label>
    <input type="checkbox" name="languages" value="JS">
    Хочу изучать JS
  </label>
</form>

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 чекбокса. Свяжите их вложив <input> внутри <label>. Не забудьте добавить атрибуты name и value

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

css — Как использовать символ галочки / галочки (✓) вместо маркеров в неупорядоченном списке?

спросил

Изменено 4 месяца назад

Просмотрено 258 тысяч раз

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

 ✓ это мой текст
✓ это мой текст
✓ это мой текст
✓ это мой текст
✓ это мой текст
✓ это мой текст

Примечание. Я хочу это в этом типе HTML-кода

 
    
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    •
  • css
  • html
  • специальные символы

Вы можете использовать псевдоэлемент для вставки этого символа перед каждым элементом списка:

 ul {
  стиль списка: нет;
}

уль ли: до {
  содержание: '✓';
} 
 <ул>
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    •

    3

    Вот три различных стиля галочек, которые вы можете использовать:

     ul:first-child li:before { content:"\2713\0020"; }  /* ИЛИ */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* ИЛИ */
ul:last-child li:before { content:"\2611\0020"; }
ul {тип стиля списка: нет; } 
     <ул>
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 


<ул>
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 



      
  
    • это мой текст
      • 
  
    • это мой текст
      • 
  
    • это мой текст
      • 
  
    • это мой текст
      • 
  
    • это мой текст
      •

    Ссылки:

    • На что влияет содержание: «\0020»; свойство?
    • http://nealchester. com/special-characters/#checkmarks

    8

    В качестве дополнения к раствору:

     ul li:before {
 содержание: '✓';
}

    Вы можете использовать любой значок SVG в качестве содержимого , например Font Aswesome .

     ул {
  стиль списка: нет;
  отступ слева: 0;
}
ли {
  положение: родственник;
  отступ слева: 1.5em; /* место для сохранения отступа при переносе */
}
ли: до {
  содержание: ''; /* заполнитель для SVG */
  положение: абсолютное;
  слева: 0; /* поместите SVG в начало заполнения */
  ширина: 1см;
  высота: 1см;
  background: url("data:image/svg+xml;utf8,") без повторов ;
} 
     <ул>
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • Это мой текст, он довольно длинный, поэтому его нужно обернуть.  Обратите внимание, что при обертывании сохраняется отступ, который был у пуль!
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    •

    Примечание: Чтобы решить проблему упаковки, которая была у других ответов:

    • , мы резервируем 1,5 м пространства слева от каждого
    • , затем поместите SVG в начало этого пространства ( position: absolute; left: 0 )

    Вот еще черные иконки Font Awesome.

    Проверьте этот CODEPEN , чтобы увидеть, как вы можете добавлять цвета и изменять их размер.

    0

     <ул>
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    •

    вы можете использовать этот простой стиль css

     ul {
     тип-стиля-списка: '\ 2713';
   }

    3

    Вы также можете использовать псевдоэлемент ::marker для установки маркера элементов списка.

    Однако его список разрешенных свойств CSS несколько ограничен.

    Поддержка браузеров по состоянию на октябрь 2022 г.: 94% (без поддержки IE)

     ul li::marker {
  содержание: '✓';
  цвет: зеленый;
} 
     <ул>
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    • 
  
  • это мой текст
    •

    По состоянию на 2022 год я нашел самый простой в использовании. И позволяет указать цвет маркера. CSS ниже:

     li::маркер {
  красный цвет;
  содержание: "✓";
}

    Просто хочу добавить, что для тех, кто застрял в уникальной ситуации, когда необходим встроенный css (например, в контексте массовой рассылки электронной почты, где почтовые клиенты все еще нуждаются в встроенном css), вы можете использовать list-style-type: none и комбинировать его с код символа для выбранного вами маркера (галочка используется ниже), например:

     
      
  
    • ✔ Элемент списка 1
      • 
  
    • ✔ Элемент списка 2
      • 
  
    • ✔ Элемент списка 3
      • 
  
    • ✔ Элемент списка 4
      •

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    $.

    jqplot.AxisTickRenderer

    >Главная>Примеры>Документы>Загрузить>Информация>Пожертвовать

    $.jqplot. AxisTickRenderer

    Объект «метка», показывающий значение деления/линии сетки на графике.

    Сводка

    $.jqplot. AxisTickRenderer Объект «метка», показывающий значение деления/линии сетки на графике.
    Свойства
    метка галочка на оси.
    showMark показывать или нет метку на оси.
    showGridline следует ли рисовать линию сетки на сетке в этот тик.
    isMinorTick, если это второстепенный тик.
    размер Длина деления за сеткой в ​​пикселях.
    markSize Длина делений в пикселях.
    показывать показывать или нет галочку (метку и метку).
    showLabel показывать или нет метку.
    средство форматирования Класс средства форматирования текста галочки.
    префикс Строка, которая добавляется перед меткой галочки.
    суффикс Строка, добавляемая к метке галочки.
    formatString строка, переданная средству форматирования.
    fontFamily спецификация CSS для CSS-атрибута font-family.
    fontSize спецификация css для CSS-атрибута font-size.
    textColor спецификация css для атрибута цвета.
    escapeHTML true для экранирования объектов HTML в метке.

    Свойства

    отметка

    this.mark = ‘снаружи’

    отметка на оси. Один из «внутри», «снаружи», «крест», «» или ноль.

    showMark

    this.showMark = true

    показывать или нет метку на оси.

    показатьСетка

    this.showGridline = true

    следует ли рисовать линию сетки на сетке в этот тик.

    isMinorTick

    this.isMinorTick = false

    , если это второстепенный тик.

    size

    this.size = 4

    Длина деления за сеткой в ​​пикселях. УСТАРЕЛО: заменено markSize

    markSize

    this.markSize = 6

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

    show

    this.show = true

    показывать или нет галочку (метку и метку). Если для этого параметра установлено значение false, требуется дополнительное тестирование. Вместо этого рекомендуется установить для showLabel и showMark значение false.

    showLabel

    this.showLabel = true

    показывать или нет метку.

    средство форматирования

    this.formatter = $.jqplot.DefaultTickFormatter

    Класс средства форматирования для тикового текста. спринтф по умолчанию.

    префикс

    this.

    No related posts.

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

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