CSS hack学习经验分享：浏览器选择

最新推荐文章于 2024-10-28 12:01:42 发布

原创最新推荐文章于 2024-10-28 12:01:42 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

前端笔记同时被 2 个专栏收录

8 篇文章

订阅专栏

CSS Hack

3 篇文章

订阅专栏

本文介绍了一种通过CSS设置禁止网页文本被选中的方法，适用于多种浏览器，并提供了允许特定区域文本选择的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决问题：双击鼠标选中一段文本，经常被恶心到了。

解决方式，为 html 设置如下样式：

html {
	-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	*/
}

user-select 属性值默认为“text”

当有需要选中文本的地方可以设置一个类，然后为需要选择的地方添加这个类，如：

.canSelect {
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}