如何禁用文本选择突出显示 [英] How to disable text selection highlighting

问题描述

对于像按钮一样起作用的锚点(例如，堆栈上方的问题，标签，用户等)页)或标签页，如果用户不小心选择了文本，是否有CSS标准的方法来禁用突出显示效果?

我意识到这可以使用JavaScript来完成，并且进行了一些谷歌搜索，从而产生了仅Mozilla的-moz-user-select选项.

是否有使用CSS的符合标准的方法，如果没有，最佳实践"方法是什么?

解决方案

更新2017年1月:

根据我可以使用的情况，user-select当前受所有支持Internet Explorer 9和更早版本以外的浏览器(但遗憾的是 still 需要供应商前缀).

---

所有正确的CSS变体是:

 .noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
} 

 <p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p> 

---

请注意，user-select正在标准化过程中(当前在 W3C工作草案).不能保证它在任何地方都能工作，并且浏览器的实现可能会有所不同，将来浏览器可能会放弃对此的支持.

---

更多信息，请参见 Mozilla开发人员网络文档.

For anchors that act like buttons (for example, Questions, Tags, Users, etc. at the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?

I realize this could be done with JavaScript, and a little googling yielded the Mozilla-only -moz-user-select option.

Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?

解决方案

UPDATE January, 2017:

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly still needs a vendor prefix).

---

All of the correct CSS variations are:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

---

Note that user-select is in standardization process (currently in a W3C working draft). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.

---

More information can be found in Mozilla Developer Network documentation.

这篇关于如何禁用文本选择突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！