Strange blue frame in Firefox

Question

Please take a look at this code.

http://www.jsfiddle.net/tt13/5CxPr/21

In Firefox, it shows a strange blue border when you select multiple lines by pressing the ctrl button, but on Chrome it is not.

Using the latest Firefox 10.0.2.

Is this a browser related error?

Answer 1

This is due to the fact that the text is selected - the behavior of its own browser.

You can observe this problem in Chrome as well, using the SHIFT key instead of CTRL .

To overcome this, you can simply clear the selection as soon as the user clicks a cell to select:

 $(".subject").live('click',function(event) { if(event.ctrlKey) { $(this).toggleClass('selected'); } else { $(".subject").removeClass("selected"); $(this).addClass("selected"); } if (document.selection) document.selection.empty(); else if (window.getSelection) window.getSelection().removeAllRanges(); }); 

Updated violin .

Answer 2

Try setting the CSS -moz-user-select property to the table to disable the default behavior:

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

MDN

Answer 3

This works for the current version of Firefox 20.0.1, if you are ready to add an additional element inside your cell so that the text can still be selected.

 td { -moz-user-select: -moz-none } td * { -moz-user-select: text } 

http://jsfiddle.net/nukj7/