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?

Answer 1

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;
}