How to make a Ul list item unselectable [duplicate]

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
– Jace, Commented Apr 24, 2013 at 0:32
I want to do this using javascript. Make one of the list item as unselectable or disable it — Parag A
– Parag A, Commented Apr 24, 2013 at 0:40
Check this link https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting?rq=1 — Ravi Ashara
– Ravi Ashara, Commented Jan 19, 2021 at 12:55

Jace · Accepted Answer · 2013-04-24 00:53:27Z

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/

Collectives™ on Stack Overflow

How to make a Ul list item unselectable [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related