禁止用户选定文本: user-select

本文详细介绍了CSS user-select属性的功能,包括text、element、none和auto四个值的用法,以及其在不同浏览器的兼容性。同时提供了示例代码帮助理解如何应用此属性以避免元素被意外选中。

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

双击文本 select,会被选定,如下

但有时点击元素时不想要被选定的状态,有一个尚未成为标准的 CSS 属性: user-select,它有 4 个值:

  1. text 可以选择文本
  2. element 可以选择文本,但选择范围受元素边界的约束。
  3. none 不可以选择文本。
  4. auto 如果该元素包含可编辑的文本(如输入元素或可编辑内容的元素),则可以选择文本。否则,元素内容是否可选择由父节点的值决定。

目前Firefox/Chrome/IE10+已经支持了,但需要加前缀

.unselect {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

 

比如如下文本双击不会被选定

您选定不了我,您选定不了我,您选定不了我,您选定不了我

 

兼容性:目前除了IE10-,其它浏览器都支持。

 

相关:

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select

http://blogs.msdn.com/b/ie_cn/archive/2012/01/17/css-user-select.aspx

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值