css覆盖禁用文本选择 [英] css override disable text selection

问题描述

有些人出于各种原因喜欢禁用文本选择，例如如果有人按 CTRL A 会使页面看起来难看，或者您可能不希望人们在突出显示要在 Google 上搜索的文本后离开您的网站！

Some people like to disable text selection for various reasons like keeping it on can make a page look ugly if someone hits CTRL A, or maybe you don't want people potentially leaving your site after highlighting text to search for on Google!

我在我的网站上全局禁用了文本选择，并希望根据需要在特定元素上重新启用它.经过一番调查，我找到了解决方案.

I globally disabled text selection on my site and wanted to re-enable it on specific elements as required. After some investigation, I found the solution.

列出的所有代码都经过测试并可在多个浏览器上运行.

All the code listed is tested and working on multiple browsers.

CSS 全局禁用文本选择的示例.

CSS example of globally disabling text selection.

* {user-select:none;}

推荐答案

解决方案.请查看下面的 jsfiddle 链接以获取工作示例.

The solution. Please check out the jsfiddle link below for a working example.

HTML

<h2>Unselectable/Selectable</h2><br/>
<p>You can't select any of this text but you can select the text in the box below because a css rule has been made specifically to reenable text selection for that particular element.<br/><br/></p>
<input name="title" id='selectMe' type="textbox" />

CSS

* {padding:20px; user-select:none;}
#selectMe {user-select:text; border:1px solid #000; padding:10px;}

http://jsfiddle.net/7zwr0ody/1/

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