Please, take a look at this code

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?

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?

• javascript
• jquery
• css
• firefox

• 1 Isnt that a feature? Firefox highlights selected elements with a blue border. – Alex Commented Feb 26, 2012 at 9:14
• It's probably the outline your seeing, try removing it. – adeneo Commented Feb 26, 2012 at 9:14
• @Alex Dunno. Anyway, if this is feature I want to disable it. Question is, how? – Tural Ali Commented Feb 26, 2012 at 9:14
• @adeneo no it's not. tried to add outline:0 to .selected selector. Nothing changed – Tural Ali Commented Feb 26, 2012 at 9:16
• Hard to say. I can't really test your fiddle, it's not working on Mac. I think the ctrlKey-event isn't fired. – Alex Commented Feb 26, 2012 at 9:16

3 Answers 3

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.

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

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

MDN

This works for current version of Firefox 20.0.1 if you're prepared to add an extra element inside your cell to allow the text to still be selectable.

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

http://jsfiddle.net/nukj7/