Как сделать список с галочками в html

Обновлено: 04.07.2024

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

Основан на связи и помещенного в него инпута, т.е. по клику на него, инпут будет менять свое состояние.

Стоит заменить что в некоторых старых браузерах (например Safari) такой приём не работает и требует добавление атрибутов for у и id у чекбокса.

Сам чекбокс скрывается, но без использования display: none , что бы оставить функциональность фокуса.

По умолчанию, фокус появляется при клике на элемент, что не очень и нужно. Оставить выделение при фокусе только при нажатии клавиши Tab можно с помощью JQuery, добавляя класс focused родительскому элементу.

Пример №1

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

В HTML для создания списков используются теги группы lists. К ним относятся:

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

Далее будет показана практика создания HTML списков с примером исходного кода и описанием на русском языке.

В HTML есть три типа списков: маркированный, нумерованный и список определений (терминов).

Маркированный список

Пример простого маркированного списка HTML

Яблоки
Абрикосы
Бананы
Сливы

Исходный код простого маркированного списка:

Типы маркеров

Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type . Тип маркера может быть задан, как для списка в целом (свойство применяется к ), так и для конкретного элемента (свойство применяется к ).

Список с разными типами маркеров:

Disc - закрашенный круг, точка.
Circle - окружность, пустая внутри.
Square - квадрат.

Исходный код списка с разными типами маркеров:

Положение маркера в списке

HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position . Положение может быть задано, как для списка в целом, так и для отдельного элемента.

Пример списка с разным положением маркеров:

Маркер внутри (inside)
Маркер снаружи (outside)

Исходный код списка с разным положением маркеров:

Свой маркер в HTML списке

Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image .

Пример списка со своей картинкой в роли маркера:

Исходный код списка со своим маркером - картинкой:

Нумерованный список

Пример нумерованного списка HTML

Выучить HTML
Добавить CSS
Освоить JavaScript

Исходный код нумерованного списка

Типы нумерации в HTML списке

В HTML доступны 5 типов нумерации в списках. Чтобы изменить тип нумерации используйте атрибут type . Тип нумерации можно задавать как для списка в целом, так и для конкретных его элементов.

Разные типы нумерации в списках:

Другие варианты нумерации, включая греческую, еврейскую, японскую, с ведущими нулями и т.д. можно получить используя CSS свойство list-style-type .

Многоуровневый список HTML (список в списке)

HTML не имеет отдельного элемента для создания многоуровневых списков. Вместо этого в HTML используются вложенные списки - список в списке.

Ограничений по количеству уровней вложенности списков нет.

Пример многоуровневого списка

Исходный код многоуровневого списка

Список определений

Для создания списка определений используются теги , и . Тег dl - это контейнер списка определений, dt - термин, dd - описание термина.

Пример простого списка определений:

Спектр Распределение значений физической величины, например, массы, частоты или энергии. Люминесценция Эффект нетеплового свечение вещества, происходящий после поглощения им энергии.

Дьявол — в деталях. Дизайн — в мелочах. Аккуратные списки в тексте — важный штрих к портрету сайта. Они упрощают восприятие контента и усиливают вовлечённость в чтение статьи.

Как оформляются списки в HTML?

Код для вывода нумерованных списков:

Код для вывода маркированных списков:

За вывод конкретного пункта списка отвечает тег li. Все пункты списка заключены в общий тег ul или ol. Стили этих тегов выносят в таблицу стилей (в файл style.css).

Для каждого тега присваивают определенные стили оформления. В них указывают отступы от текста.

Для нумерованного списка прописывают стили нумерации для каждого пункта.

Стандартные арабские цифры описывают значением decimal.

list-style-type: decimal; /*арабские цифры*/

Для маркерованного списка указывают стиль символов — квадратики или кружочки.

list-style-type: circle; /*кружки*/
list-style-type: square; /*квадраты*/

Каждому пункту меню можно назначить изображение.

list-style-image: url(‘путь к изображению’);

Где стили списков прописаны в шаблоне Twenty Eleven?

Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */

Стандартный код выглядит вот так:

Как оформить нумерованный список?

Нумерованный список с использованием фона

Цифры на фоне цветных квадратов в стиле сайта прекрасно оживят дизайн.

Найдите в файле style.css стили для тега ol. Обновите его свойства.

Синтаксис кода предельно прост.

list-style-type: none; — вывод стандартных цифр
counter-reset: point; — переменная для счетчика нумерации
position: relative; — размещение нумерации возле самих пунктов списка

В стилях можно задать любые цвета, выравнивания, размеры шрифта и отступы.

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

Сайты о моде и красоте требуют ярких красок.

Идея проста: перечислить все номера пунктов и назначить для каждого уникальную иконку.

Если в списках предусмотрено использование до 20 нумерованных пунктов, то прописывают псевдокласс nth-child(An) 20 раз. Последним указывают псевдокласс nth-child(20n).

В строках, описывающих оформление нумерованного списка дописывают псевдокласс first-child. Необходимо скопировать и вставьте его один раз, затем изменить данное свойство на nth-child(An) и скопировать столько, сколько номеров пунктов должно иметь свою иконку, а потом проставить номера пунктов.

Для каждого номера указывают свойство list-style-image с собственной уникальной иконкой.

Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.

Как оформить маркированный (ненумерованный) список?

Маркированный список ul li с чередующимися иконками

Галочки в маркированном списке могут отличаться по насыщенности тона.

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

Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.

В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты.

Для каждого пункта списка можно задать нижнее подчеркивание. В приведенном примере пункты отмечаются пунктиром.

Каждому пункту списка можно назначить свои рамки, фон, иконки.

Как вывести на странице несколько списков с разным оформлением?

Списки в тексте могут иметь разное оформление.

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

Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили.

Простой пример аккуратного оформления содержания статьи:

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

Новый стиль отличается от основного оформлением тега ol. Здесь представлен новый фон, появилась чёткая линия слева от содержимого.

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

Описанные методы применимы в дизайне пунктов меню, рубрик и любых других элементов сайта.

Как создать ссылки-якоря в списке содержания?

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

Как прописать ссылки-якоря в HTML коде? Один фрагмент кода обрамляет анкор ссылки, а другой — ставится рядом с тем местом, куда нужно перебросить читателя после клика по ссылке.

Код блока содержания:

Код в тексте статьи для создания метки, на которую переносится внимание читателя при клике:

Проектирование дружественного дизайна и аккуратное оформление контента — важный шаг к процветанию сайта.

отлично работает в Safari, Firefox и Chrome, но отображает "freak Out boxes" на IE8.

сафари:

IE8:

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

изменить решение: Я закончил использование вариант ответа Медера ниже:

вероятно, это единственный способ заставить его работать последовательно в IE pre 8/9.

затем измените его через javascript, возможно.

Хммм как насчет того, чтобы пойти с небольшим изображением вместо этого, то вы получите полную совместимость практически с каждым браузером

альтернативно взгляните на этот последний вопрос ТИК символ в HTML / XHTML

Я не уверен, что кто-то еще должен поддерживать IE8, но я хотел узнать, почему IE8 создает эти коробки, поэтому я искал в интернете и нашел этот пост:символы Юникода и Internet Explorer

Итак, основываясь на ответах на этот вопрос, похоже, что вы can используйте метод, описанный OP, вам просто нужно указать шрифт Unicode, чтобы сделать IE8 счастливым. Так что теоретически это должно сработать отлично:

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

Читайте также: