Strange blue border on Firefox

Question

Please, take a look at this code

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

On Firefox it shows strange blue border when you select multiple row by pressing ctrl button but on Chrome it doesn't.

Using latest Firefox 10.0.2.

Is that browser related bug?

Answer 1

This is due to text being selected - native browser behavior.

You can observe the same issue in Chrome as well by using the SHIFT key instead of CTRL.

To overcome this, you can simply clear the selection right after user click the 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 fiddle.