Css list decoration none

list-style

The list-style CSS shorthand property allows you to set all the list style properties at once.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* type */ list-style: square; /* image */ list-style: url("../img/shape.png"); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url("../img/shape.png") outside; /* Keyword value */ list-style: none; /* Global values */ list-style: inherit; list-style: initial; list-style: revert; list-style: revert-layer; list-style: unset; 

The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.

Values

Accessibility concerns

In a notable exception, Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a list-style value of none . This behavior is intentional and not considered a bug.

or
element in the markup. This will restore the list semantics without affecting the design:

ul role="list"> li>An itemli> li>Another itemli> ul> 

A CSS-only workaround is also available for those who do not have access to the markup: Adding pseudo-content before each list item can restore list semantics:

ul  list-style: none; > ul li::before  content: "+ "; > 

The added pseudo-content is tested by Safari to determine if it should be accessible or ignored. Accessible pseudo-content restores list semantics, while ignored pseudo-content does not.

Generally, text or images are determined to be things that should be accessible, which is why the content: «+ «; declaration in the previous example works.

A declaration of content: «»; (an empty string) is ignored, as are content values that contain only spaces, such as content: » «; , so these do not work.

If the intent is to keep list item markers visually hidden, this can often be managed with a zero-width space, ​ , which is \200B in CSS and \u200B in JavaScript:

ul  list-style: none; > ul li::before  content: "\200B"; > 

Another visually hidden approach is to apply an to the list-style property:

nav ol, nav ul  list-style: none; > /* becomes */ nav ol, nav ul  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); > 

These CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they don’t result in unexpected behaviors that may negatively impact users’ experiences.

Formal definition

• list-style-type : disc
• list-style-position : outside
• list-style-image : none

• list-style-image : The keyword none or the computed
• list-style-position : as specified
• list-style-type : as specified

• list-style-image : discrete
• list-style-position : discrete
• list-style-type : discrete

Formal syntax

Examples

Setting list style type and position

HTML

ul class="one"> li>List Item1li> li>List Item2li> li>List Item3li> ul> List 2 ul class="two"> li>List Item Ali> li>List Item Bli> li>List Item Cli> ul> 

CSS

.one  list-style: circle; > .two  list-style: square inside; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 26, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

list-style-type

list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit

Значения

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

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

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

armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4. ). decimal-leading-zero
Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d. ). lower-greek Строчные греческие буквы (α, β, γ, δ. ). lower-latin Это значение аналогично lower-alpha . lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v. ). upper-alpha Заглавные латинские буквы (A, B, C, D. ). upper-latin Это значение аналогично upper-alpha . upper-roman Римские числа в верхнем регистре (I, II, III, IV, V. ). none Отменяет маркеры для списка. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

1. Lorem ipsum dolor sit amet
2. Consectetuer adipiscing elit
3. Sed diem nonummy nibh euismod
4. Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства list-style-type

Объектная модель

[window.]document.getElementById(» elementID «).style.listStyleType

Браузеры

и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin , inheirt . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов ( ul < float: left; >).

Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ. ).

CSS по теме

Источник

CSS list-style-type Property

The list-style-type specifies the type of list-item marker in a list.

Default value:	disc
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.listStyleType=»square» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Note: Edge 18 and Opera 12 and earlier versions do not support the values: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.

CSS Syntax

Property Values

Value	Description	Demo
disc	Default value. The marker is a filled circle	Demo ❯
armenian	The marker is traditional Armenian numbering	Demo ❯
circle	The marker is a circle	Demo ❯
cjk-ideographic	The marker is plain ideographic numbers	Demo ❯
decimal	The marker is a number	Demo ❯
decimal-leading-zero	The marker is a number with leading zeros (01, 02, 03, etc.)	Demo ❯
georgian	The marker is traditional Georgian numbering	Demo ❯
hebrew	The marker is traditional Hebrew numbering	Demo ❯
hiragana	The marker is traditional Hiragana numbering	Demo ❯
hiragana-iroha	The marker is traditional Hiragana iroha numbering	Demo ❯
katakana	The marker is traditional Katakana numbering	Demo ❯
katakana-iroha	The marker is traditional Katakana iroha numbering	Demo ❯
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)	Demo ❯
lower-greek	The marker is lower-greek	Demo ❯
lower-latin	The marker is lower-latin (a, b, c, d, e, etc.)	Demo ❯
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)	Demo ❯
none	No marker is shown	Demo ❯
square	The marker is a square	Demo ❯
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)	Demo ❯
upper-greek	The marker is upper-greek	Demo ❯
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)	Demo ❯
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

This example demonstrates all the different list-item markers:

Example

or
by removing their default bullets and adding a HTML entity that looks like bullets (•):

ul <
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
>

li::before content: «•»; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
>

Источник