TAGS :Viewed: 6 - Published at: a few seconds ago

[ How to make numbers in a html ordered list unselectable ]

If I have a ordered list such as

<ol>
<li>list item 1</li>
<li>list item 2</li>
</ol>

How can I make the numbering (the 1. and 2.) unselectable when highlighting the list items?

Answer 1


This should do the trick (change selectors as necessary):

ol {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

ol p {
    -webkit-user-select: all; /* Chrome/Safari */        
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* IE10+ */
}