Css style ul bullet

How to Remove, Replace or Style List Bullets with Pure CSS

If your intention is to have one list or one list item, not to have bullets or numbers, you had better apply a class that might be used every time you need to remove bullets.

Here, we will have a class named «nolist» for ordered lists, which can be used anytime when needed in the future.

Example of creating a list with one removed bullet from the unordered list:

html> html> head> title>Title of the document title> style> .nolist < list-style: none; > style> head> body> h2>Unordered list h2> ul> li>List Item 1 li> li class="nolist">List Item 2 li> li>List Item 3 li> ul> h2>Ordered list h2> ol class="nolist"> li>List Item 1 li> li>List Item 2 li> li>List Item 3 li> ol> body> html>

How to Replace List Bullets with Images

CSS can be used to convert list bullets into squares or circles, but this gives little control over their appearance or positioning. Changing standard HTML list bullets to images is an excellent way of connecting them to your website theme and make your site visually more attractive.

There are two ways of setting images for list items:

1. Use the list-style-image property to replace the HTML bullets with graphic images. Moreover, in most modern browsers, the placement of these images is inconsistent. There is also very little control over how next to the list items the bullets appear.

Example of replacing list bullets with images using the list-style-image property:

html> html> head> title>Title of the document title> style> ul < list-style-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png"); > style> head> body> ul> li>List item 1 li> li>List item 2 li> li>List item 3 li> ul> body> html>

Example of replacing list bullets with images using background properties:

html> html> head> title>Title of the document title> style> ul < list-style-type: none; padding: 0; margin: 0; > li < background-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png"); background-repeat: no-repeat; background-position: 1px; padding-left: 20px; > style> head> body> ul> li>Green li> li>Blue li> li>Yellow li> li>Red li> ul> body> html>

In standard HTML lists, there is a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Safari) and others use margins (Opera) to set the amount of indentation.

In the case that the left-indentation is required, it is recommended to use margin-left. As the padding is currently set to «0», it’s possible to define an exact measurement for the left margin that will be consistent across all browsers.

It is also possible to have a different background image for each list item. Just add classes and set the background image for each class.

How to Create Horizontal Lists

Example of creating horizontal lists:

html> html> head> title>Title of the document title> style> #container ul < margin: 0; padding: 0; list-style-type: none; text-align: center; > #container ul li < display: inline; > #container ul li a < text-decoration: none; padding: 5px 20px; color: #fff; background-color: #1c87c9; > #container ul li a:hover < color: #fff; background-color: #369; > style> head> body> div id="container"> ul> li>a href="#">Home a> li> li>a href="#">Blog a> li> li>a href="#">Contact a> li> li>a href="#">About a> li> ul> div> body> html>

How to Style Lists

Style your lists with colors specifying the color and background-color for them.

Example of styling an ordered and unordered list:

html> html> head> style> ol < background: #1c87c9; padding: 20px; color: cyan; > ul < background: #8ebf42; padding: 20px; > ol li < background: #666; padding: 5px; margin-left: 35px; > ul li < background: #eee; margin: 5px; > style> head> body> ol> li>Coffee li> li>Tea li> li>Milk li> ol> ul> li>Coffee li> li>Tea li> li>Milk li> ul> body> html>

Make a full-width bordered list using the CSS border and border-bottom properties.

Example of creating a full-width bordered list:

html> html> head> title>Title of the document title> style> ul < border: 1px solid #ddd; background-color: #eee; list-style-type: none; padding: 0; > ul li < padding: 8px 10px; border-bottom: 1px solid #ddd; > ul li:last-child < border-bottom: none; > style> head> body> ul> li>Coffee li> li>Tea li> li>Milk li> ul> body> html>

Add a border to your list items using the CSS border-left property.

Example of creating a left-bordered list:

html> html> head> title>Title of the document title> style> ul < border-left: 5px solid #8ebf42; background-color: #eee; list-style-type: none; padding: 10px 20px; > style> head> body> div id="container"> ul> li>Coffee li> li>Tea li> li>Milk li> ul> div> body> html>

To have different list bullets in one list, you just need to apply a class to each list item and specify the list-style for them separately.

Example of creating a list with different list bullets:

html> html> head> title>Title of the document title> style> .disc < list-style: disc; > .square < list-style: square; > .armenian < list-style: armenian; > .lower-greek < list-style: lower-greek; > style> head> body> ul> li class="disc">Disc bullet li> li class="square">Square bullet li> li class="armenian">Armenian bullet li> li class="lower-greek">Lower-greek bullet li> ul> body> html>

All List Item Markers Example

) and unordered (
) lists can have.

Example of creating different list item markers:

html> html> head> title>Title of the document title> style> ul.a < list-style-type: circle; > ul.b < list-style-type: square; > ol.c < list-style-type: upper-roman; > ol.d < list-style-type: lower-alpha; > ol.e < list-style-type: armenian; > ol.f < list-style-type: decimal; > ol.g < list-style-type: cjk-ideographic; > ol.h < list-style-type: decimal-leading-zero; > ol.i < list-style-type: georgian; > ol.j < list-style-type: hebrew; > ol.k < list-style-type: hiragana; > ol.l < list-style-type: hiragana-iroha; > ol.m < list-style-type: katakana; > ol.n < list-style-type: katakana-iroha; > ol.o < list-style-type: lower-greek; > ol.p < list-style-type: lower-latin; > ol.q < list-style-type: lower-roman; > ol.r < list-style-type: none; > ol.s < list-style-type: upper-alpha; > ol.t < list-style-type: upper-latin; > style> head> body> h2>Examples of unordered lists: h2> h3>Circle h3> ul class="a"> li>New York li> li>Las Vegas li> li>Washington li> ul> h3>Square h3> ul class="b"> li>San Francisco li> li>Los Angeles li> li>Miami li> ul> h2>Examples of ordered lists: h2> h3>Upper-roman h3> ol class="c"> li>Barcelona li> li>Madrid li> li>London li> ol> h3>Lower-alpha h3> ol class="d"> li>Dubai li> li>Abu Dhabi li> li>Qatar li> ol> h3>Armenian h3> ol class="e"> li>Yerevan li> li>Paris li> li>Rome li> ol> h3>Decimal h3> ol class="f"> li>Sydney li> li>Hong Kong li> li>Moscow li> ol> h3>Cjk-ideographic h3> ol class="g"> li>Kiev li> li>Saint-Petersburg li> li>Tula li> ol> h3>Decimal-leading-zero h3> ol class="h"> li>Bangkok li> li>Gyumri li> li>Valencia li> ol> h3>Georgian h3> ol class="i"> li>Madrid li> li>Barcelona li> li>Prague li> ol> h3>Hebrew h3> ol class="j"> li>Jerusalem li> li>Toronto li> li>Prague li> ol> h3>Hiragana h3> ol class="k"> li>Cairo li> li>Tokyo li> li>Athens li> ol> h3>Hiragana-iroha h3> ol class="l"> li>Tehran li> li>Tavriz li> li>Tel Aviv li> ol> h3>Katakana h3> ol class="m"> li>Munich li> li>Berlin li> li>Bavaria li> ol> h3>Katakana-iroha h3> ol class="n"> li>Brussels li> li>Istanbul li> li>Sydney li> ol> h3>Lower-greek h3> ol class="o"> li>Seville li> li>Granada li> li>Venice li> ol> h3>Lower-latin h3> ol class="p"> li>Budapest li> li>Vienna li> li>Amsterdam li> ol> h3>Lower-roman h3> ol class="q"> li>Buenos Aires li> li>Rio de Janeiro li> li>San Paolo li> ol> h3>None h3> ol class="r"> li>Vilnius li> li>Tallinn li> li>Riga li> ol> h3>Upper-alpha h3> ol class="s"> li>Montreal li> li>Melbourne li> li>Edinburgh li> ol> h3>Upper-latin h3> ol class="t"> li>Dublin li> li>Mexico li> li>Florence li> ol> body> html>

Источник

CSS Lists

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Example

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Remove Default Settings

Example

List — Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

When using the shorthand property, the order of the property values are:

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

or
tag, affects the entire list, while properties added to the
tag will affect the individual list items:

Example

ol <
background: #ff9999;
padding: 20px;
>

ul background: #3399ff;
padding: 20px;
>

ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>

ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>

More Examples

Customized list with a red left border
This example demonstrates how to create a list with a red left border.

Full-width bordered list
This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

Источник

Свойства списков

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

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

Табл. 1. Свойства CSS для управления видом списка

Свойство	Значение	Описание	Пример
list-style-type	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none	Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного.	LI LI
list-style-image	none URL	Устанавливает символом маркера любую картинку.	LI
list-style-position	outside inside	Выбор положения маркера относительно блока строк текста.	LI
list-style	Универсальное свойство, включает одновременно все вышеперечисленные свойства.

или
, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL , так и для селектора LI . Так, в примере 1 используется селектор UL , для него и задаются стилевые параметры.

Пример 1. Создание маркированного списка

Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

Рис. 1. Вид списка, измененого с помощью стилей

Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

Пример 2. Использование изображений в качестве маркера

Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

Рис. 2. Изображения в качестве маркеров

Некоторые примеры создания различных списков приведен в табл. 2.

• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста

• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста

• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста

Нумерованный список с арабскими цифрами:

Нумерованный список со строчными римскими цифрами:

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

Нумерованный список со строчными буквами латинского алфавита:

Нумерованный список с заглавными буквами латинского алфавита:

Источник