How to make a Ul list item unselectable

Question

I have following ul. I want to make any particular list item unselectable.

<ul>
  <li>ABC</li>
  <li>PQR</li>
  <li>XYZ</li>
</ul>

How can I do this? I tried setting following css class, but did not help

.unselectable {
 -moz-user-select: -moz-none;
 -khtml-user-select: none;
 -webkit-user-select: none;
  -o-user-select: none;
  user-select: none
}

This might be silly, or obvious, but could you also just show us how you're setting up your HTML? — Jace, Apr 24 '13 at 00:32
I want to do this using javascript. Make one of the list item as unselectable or disable it — Parag A, Apr 24 '13 at 00:40
Check this link `https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting?rq=1` — Ravi Ashara, Jan 19 '21 at 12:55

Jace · Answer 1 · 2013-04-24T00:53:27.027

It does work, but I think the problem you might be having is in the way you are setting up your HTML.

Ensure that the <li> elements you want to not be selectable have the unselectable class, as per this example:

<li class="unselectable">unselectable</li>

Fiddle:
http://jsfiddle.net/TtLQa/1/

Also, please refer to this link for browser support information with regards to user-select:none.

Edit:

I just saw your comment, you want to do this via javascript.

Using jQuery, you can easily add or remove a class as you wish:

$(element).addClass("unselectable");
$(element).removeClass("unselectable");

//removes it if it is there, or adds it if it is not
$(element).toggleClass("unselectable");

Fiddle:
http://jsfiddle.net/TtLQa/4/

How to make a Ul list item unselectable

1 Answers1