The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:
ul {
list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}Here’s an example of the syntax:
ul {
list-style: square outside none;
}Which would be the same as the following longhand version:
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}In the shorthand, if any values are omitted, they will revert to their initial state.
Values for list-style-type
The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type include:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN has a more complete list. Non-keyword values were introduced in CSS3, and are starting to see some support, like:
ul {
list-style-type: "→";
}The following demo includes a group of unordered lists to demonstrate each keyword value:
The list-style-type property applies to all lists, and to any element that is set to display: list-item.
The color of the list marker will be whatever the computed color of the element is (set via the color property).
Values for list-style-position
The list-style-position property defines where to position the list marker, and it accepts one of two values: inside or outside. These are demonstrated below with the padding removed from the lists and a left red border added:
Values for list-style-image
The list-style-image property determines whether the list marker is set with an image, and accepts a value of “none” or a URL that points to the image:
ul {
list-style-image: url(images/bullet.png);
}More Demos
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Works | Works |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Works |
Internet Explorer 6 and 7 don’t support all the keyword values for list-style-type and also have a bug where floated list items do not display their list marker. This is resolved by using a background image (instead of list-style-image) on the list items.
Good explanation! I was not sure what values i can add on list-style other than type .
hi , how to change bullet size? thanks
Bullet lists are proportional to your font size. If you increase your font size, the list bullets will also get bigger.
If you want to specifically target the bullet list size without touching the font, you might need to simply upload your own custom bullet image.
You could use an image, create a “bullet image” and use it like it’s done in the examples. you can use another list-style-type for every if needed, create classes to do so…
/** Begin style for list **/
.ligreen {
list-style-image: url(images/ligreen.png);
}
.lired {
list-style-image: url(images/lired.png);
}
.liblue {
list-style-image: url(http://www.tnhteam.com/plaatjes/liblue.gif);
}
/** End style for list **/
<!–// Begin html example //–>
<ul>
<li class=”ligreen”>Green bullet item</li>
<li class=”lired”>Red bullet item</li>
<li class=”liblue”>Blue bullet item</li>
</ul>
<!–// End html example //–>
You will need to create the pictures to fit your needs and you can use full http path, I used both in this example…
I hope this is helpful to you.
Happy coding ;-)
okokok
Hey, aren’t these ones valid as well:
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
Yes, they are indeed!
I love using the iroha list types.
very helpful
So how do I create a list with multiple bullets?
Like a list within the list?
Please read my other comment and create as much style classes as you need, you can find an example in my other comment.
Direct link to my other comment: https://css-tricks.com/almanac/properties/l/list-style/#comment-1588566
How to bring the closing bracket instead of dot in lower-alpha list through CSS?
Thanks! I have the drop downs working, but they don’t link to the pages. I have the exact url from the pages, but it’s not working. What am I doing wrong?
@Bonnie What isn’t working? Do you have an URL, I’d like to help you to get it to work.. Best Regards, Willem
newbie >> so an image can’t be saved to an images folder, and pulled from there to use in place of the normal bullet? One has to pull an image off of a url…. somewhere….? Thanks, Neil
because this is a css solution you can not just drag an image into the code, while you can put the image into a folder you will still need to tell the code where to find this image, which usually is done with a url.
All images are pulled via URLs, whether they’re local URLs or explicit full URLs. Even “images/yourimage.jpg” is a url, it’s just what’s called a “relative URL”, because it’s relative to where the file is that’s calling for it.
grgfgfg
I want to give hotspot for the image which i give as bullets.
how to do that?
Just to say that there is no notion of description list in HTML 5. but rather definition list.
Hi, how can I change the color of numbers before list items? I can not find any css property to do that. For now, I put span in li and change color for whole list and than for items…
Using
list-style-typefor definition data elements inside a definition list (or for that matter anything but aulorolstill doesn’t work in Firefox — and the bug has been open for over 7 years now: https://bugzilla.mozilla.org/show_bug.cgi?id=436662Thank you so much for this. I’ve been trying to solve this problem for weeks. Your solution totally works!
how do I create a selector for the empty list-style-image? Assume I have the following rules:
#menu-Custom { list-style-image: url("file:///X:/Dev/Mozilla/Chibi-32.png") } #menuOnTop-menu-Custom > image { width: 16px; height: 16px; margin-left: 5px; }and allow the user to pick an image – I have javascript setting
menuItem.style.listStyleImage = cssUri
which I get from a file they point at. But I want to also set
menuItem.style.listStyleImage = ‘none’;
and for that case define for the empty image
#menuOnTop-menu-Custom > image[url=none] { width:0; margin-left:0 }what is the correct selector for image = none ?
nice article …. how did you have the grey background on list ? that cool …
Is there any way to use a certain char? More exactly a html entity like “☆” ?
Thanks.
Replying to myself, I was able to make it work with info from https://drafts.csswg.org/css-lists/#list-style-property using:
ul { list-style-type: “★”; }
However I was not able to user ☆ I had to paste it from the page into the editor, that could be a problem.
It works with the Sea Monkey browser, but not with Pale Moon.
You can create your own custom
list-style-typeas described in http://www.w3.org/TR/css-counter-styles-3/You have some fancy char listed in this page : http://www.w3schools.com/charsets/ref_utf_symbols.asp
Fos many more utf8 char you have this awesome site : http://www.fileformat.info/info/unicode/char/2605/index.htm
I’ve made a mistake…
!importantin my previous comment isn’t usefull…There should be finally implemented ::market what styling bullets. I would like to not to use custom images and so on. Images are bad unless you use SVG.
I want a “gallerylike” page with numbered images. Adding them in a list with links floating items is OK. It seems about like this:
| Image |
|- Title -|
I want to have the images automatically numbered left of the Title. Using list-style:decimal works fine. But the images are (of course) on left before the image.
Is there a way how to set the bullet/number position to get
|—Image—|
|- Nr. Title -|
Is there anyone who can guide me to create or find some beautiful CSS bullet points appearing one by one as it happens usually in one page websites or PPTs?
Any ideas on how I can make the digits in an order list bold?
Thank you for this, it helped me to create this code which works on my site, this spaces after the check/tick create the spaces before any text:
I like all the different ways of making list styles. I just wanted to share my favorite way of making circular bullets with css.
https://iiiji.com/circled-number-lists/