How to disable blue selection on double click, in table header?

Question

I have followed table header structure:

<th>
 <a ng-click="sort_by(order)" style="color: #555555;">
   <span ng-transclude="">
       <span class="ng-scope">Some text</span>
   </span>
   <i class="icon-chevron-down"></i>
 </a>
</th>

The problem is, when I double click on header link, the background is selected (blue color) and seems messy.

How to avoid this behavior?

Thanks,

Answer 1

You could use user-select:none, which will disable selection of the th element.

jsFiddle example - try highlighting the element.

th {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Support for this property can be found here.

---

If you are concerned about support, you could alternatively use ::selection to change the color from blue to transparent. This method has a little more support.

jsFiddle example - try highlighting the element.

th::selection {
    color:transparent;
}
th::-moz-selection {
    color:transparent;
}

It is supported in IE9. Reference here.