如何在表格标题中双击禁用蓝色选择？

Question

我遵循了表头结构：

<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>

问题是，当我双击标题链接时，背景被选中（蓝色）并且看起来很乱。

如何避免这种行为？

谢谢，

Answer 1

您可以使用user-select:none，这将禁用th元素的选择。

jsFiddle 示例- 尝试突出显示元素。

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

可以在此处找到对此属性的支持。

如果您担心支持，您也可以使用::selection将颜色从蓝色更改为透明。这个方法有一点支持。

jsFiddle 示例- 尝试突出显示元素。

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

它在 IE9 中受支持。参考这里。