How can you customize the numbers in an ordered list?
This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):
ol { counter-reset: item; margin-left: 0; padding-left: 0;}li { display: block; margin-bottom: .5em; margin-left: 2em;}li::before { display: inline-block; content: counter(item) ") "; counter-increment: item; width: 2em; margin-left: -2em;}
<ol> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine<br>Items</li> <li>Ten<br>Items</li></ol>
How to do css style for ordered list numbers?
custom-counter
is an invalid selector and even if it was valid, it would be pointing to nothing. Just remove that whole ruleset and then add list-style-type: none;
to the <ol>
as in:
ol {list-style-type: none;}
Assign position:relative
to all <li>
and position:absolute
to each li::before
in order to have granular control over all bullet distances from text.
li {
position: relative;
...
}
li::before {
...
position: absolute;
top: -1px;
/* Adjust < -number | number+ > */
left: -32px;
...
:root { font: 400 16px/1.25 Verdana}
ol { list-style-type: none;}
ol li { counter-increment: step-counter; position: relative; margin: 10px 0 0 0;}
ol li::before { content: counter(step-counter); display: block; position: absolute; top: -1px; /* Adjust < -number | number+ > */ left: -32px; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; background-color: rgb(0, 200, 200); color: white; font-weight: bold; font-size: 0.8rem; text-align: center; border-radius: 15px;}
<ol> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> <li>This is the fourth item</li> <li>This is the fifth item</li> <li>This is the sixth item</li></ol>
Can you style ordered list numbers?
You can do this using CSS counters, in conjunction with the :before
pseudo element:
ol { list-style: none; counter-reset: item; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; }
<ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li></ol>
Change start number of an ordered list (ol)
You have list-style-type
set to none
on your ol
.
.number-circles {
margin: 40px 0 0 0;
padding: 0;
list-style-type: none;
}
The start
attribute won't make a difference, because the value will be hidden.
list-style-type
The
list-style-type
property specifies the appearance of a list item
element.
none
No item marker is shown.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
Can you style ordered list numbers in javascript?
You can add a class to list items you want to highlight.
document.querySelector('ol').children[1].classList.add('highlight');
li.highlight::marker {
color: red;
}
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
Styling numbers of outside ordered list
Firstly, it's not list-position-style
it's list-style-position
. Anyway, just list-style: none;
it so that to hide the numbers, then apply position: relative;
to li
and position: absolute;
to its :before
. Just take a look on what I have done below:
ol { list-style: none; counter-reset: item; } li { counter-increment: item; margin-bottom: 5px; position: relative; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; position: absolute; left: -25px; }
<ol> <li><span>blah blah blah.</span> <ol type="a" class="ol substeps"> <li>blah blah</li> <li>blah</li> </ol></li> <li>blah blah blah blah</li></ol>
Can you style ordered list numbers in javascript? If so, how?
While JS cannot directly alter the color of the marker as it's a pseudo element, not actually in the DOM, we can get it to set a CSS variable of the actual 'real' element and use that to change the color in the pseudo element.
#thelistitem {
color: blue;
}
#thelistitem::marker {
color: var(--color);
}
<ol>
<li id="thelistitem">
Hello there!
</li>
</ol>
<button onclick="document.getElementById('thelistitem').style.setProperty('--color', 'red');">Click me</button>
How to localize decimal numbers of an ordered lists?
You are probably looking for "list-style: arabic-indic;".
You can see all available styles here: https://mdn.github.io/css-examples/counter-style-demo/
There is also a draft spec to create your own symbols for numbered lists, but it is only supported in the latest Firefox so far. See https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style
Also a better reference for the list-style-type CSS attribute can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
Related Topics
Html/Css: Making Two Floating Divs the Same Height
Do You Put Schema Microdata Meta Tags in the HTML Body
How to "Disable" Zoom on a Mobile Web Page
Heights Rendering Differently in Chrome and Firefox
Css Cut Out Circle from a Rectangular Shape
Difference Between ≪Section≫ and ≪Div≫
Manually Triggering Form Validation Using Jquery
Why Is Form Enctype=Multipart/Form-Data Required When Uploading a File
How to Use Div as a Direct Child of Ul
Font Awesome Icon in Select Option
How to Add an Image to an Event With Microdata Meta Tag
Bootstrap 4: Multilevel Dropdown Inside Navigation
Html/Css Triangle With Pseudo Elements
What's the Difference Between ≪B≫ and ≪Strong≫, ≪I≫ and ≪Em≫
Ie9 Float With Overflow:Hidden and Table Width 100% Not Displaying Properly