CODEWITHSUNDEEP
javascriptjquerycssfirefox
Tural Ali
Tural Ali

Reputation: 23240

Strange blue border on Firefox

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.

enter image description here

Using latest Firefox 10.0.2.

Is that browser related bug?

Upvotes: 8

Views: 5681

Answers (3)

Dale
Dale

Reputation: 2155

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/

Upvotes: 3

Shadow Wizard
Shadow Wizard

Reputation: 66389

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.

Upvotes: 10

Didier Ghys
Didier Ghys

Reputation: 30666

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

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

MDN

Upvotes: 8

Related Questions