霍者博客

只使用CSS如何禁止选中文字,而不是JS

今天我就来教大家一个非常实用的CSS小技巧----只使用CSS如何禁止选中文字

直接上代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS禁止选中文本,而不是JS</title>
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
</style>
</head>
<body>
<p>霍者博客 这句话可以选择</p>
<p class="noselect">
霍者博客 这句话选择不了</p>
</body>
</html>

在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性unselectable="on"(直接加在DIV里即可),否则可能不会生效哦~不过现代浏览器如果不是非得兼容一些老的浏览器也可以不加。

当然如果想整个网页都不被选中,那就把上面的属性直接给body即可。

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/603.html,标题:只使用CSS如何禁止选中文字,而不是JS

【我来说两句】
分享到:

相关文章:


CSS4激动人心的新特性及浏览器支持度  (2017-3-6 7:0:0)

CSS font-weight 属性  (2017-1-25 6:8:17)

如何设置CSS里元素垂直居中效果  (2016-12-20 6:14:14)

CSS实现多行文本溢出显示省略号  (2016-12-12 5:0:22)

CSS样式表知识点回顾  (2016-4-24 8:7:20)

CSS​样式文件命名规范  (2016-4-21 9:49:45)

word-wrap&word-break的区别  (2016-4-18 11:0:26)

CSS盒子浮动 float  (2016-4-17 10:9:14)

CSS空间定位z-index空间定位  (2016-4-17 8:20:0)

CSS文字样式  (2016-4-17 8:0:48)


评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。