Disabling list highlight when clicking on the list bullet

Question

I have a simple list : example : http://www.w3schools.com/html/html_lists.asp

I am using Mozilla Firefox (version 3.6 but I think version does not matter). When I click (single) on the bullet, the list item gets selected(highlighted).

Is there a way to disable this highlighting (without removing the highlighting forever using -moz-selection)?

This behavior is not seen in Chrome or IE. Another example : (with list-style-image) : http://www.sendesignz.com/Demo/jQuery/expanding_list_item/expanding.html

Is there a way in plain javascript or jQuery or css to disable this auto selection in FF?

this article may help : http://forums.digitalpoint.com/showthread.php?t=848814 — xkeshav, May 23 '11 at 12:11
http://stackoverflow.com/questions/69430/is-there-a-way-to-make-text-unselectable-on-an-html-page — mplungjan, May 23 '11 at 12:29

score 2 · Answer 1 · answered May 23 '11 at 12:09

It's functionality implemented by Firefox as you could tell, while I don't know of any true way to remove the functionality there is a CSS workaround you can do.

Wrap all contents of the <li> in a <span>, and then using margin, padding and absolute positioning to position the span over the list item.

HTML

<ul>
<li><span>Item</span></li>
<li><span>Item</span></li>
</ul>

CSS

li span{
    margin-left: -50px;
    padding-left: 50px;
    position: absolute;
}

score 2 · Answer 2 · answered Aug 10 '11 at 15:24

2

You can use the mozilla css parameter

CSS

 li {-moz-user-select: none;}

answered Aug 10 '11 at 15:24

barney

21
1

score 0 · Answer 3 · answered Sep 20 '12 at 12:46

0

The selection seems to be related to the mousedown event. You can block it by stopping the event. For exemple in jQuery :

elt.mousedown(function(event){ return false; });

answered Sep 20 '12 at 12:46

goulagman

1

1

You should consider adding `if (event && event.preventDefault) event.preventDefault();` to your function as well. – S. Albano Sep 20 '12 at 15:07

Disabling list highlight when clicking on the list bullet

3 Answers3