css 禁止用户选中元素

一、使用`user-select`属性

1. `user-select: none;`

可以直接应用于特定的元素,阻止用户选中该元素的文本内容。

css 复制代码
.disabled-element {

  user-select: none;

}

然后在 HTML 中,将这个类应用到需要禁止选中的元素上

html 复制代码
<p class="disabled-element">这段文本不能被选中。</p>

2. 还可以使用`all`值来禁止选中元素及其子元素的文本

`.parent-element`的直接子元素不会被选中,但如果其子元素设置了`user-select`为其他值,可能会覆盖父元素的设置。

css 复制代码
.parent-element {

  user-select: none;

}

.parent-element * {

  user-select: inherit;

}

二、使用其他方式间接实现

1. `pointer-events`

通过设置元素的`pointer-events`属性为`none`,可以阻止鼠标事件,间接实现不能选中的效果,但这也会阻止其他鼠标交互,如点击等。

css 复制代码
.blocked-element {

  pointer-events: none;

}

2. 对于一些特定的标签

如`input`、`textarea`等,可以设置`readonly`或`disabled`属性来阻止用户编辑和选中内容,但这会改变元素的外观和行为。

css 复制代码
input[readonly],

textarea[readonly] {

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}
相关推荐
zhaocarbon几秒前
el-scrollbar 动态更新内容 鼠标滚轮无效
前端·javascript·vue.js
~甲壳虫1 小时前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
.net开发1 小时前
WPF使用Prism框架首页界面
前端·c#·.net·wpf
名字越长技术越强1 小时前
vue--vueCLI
前端·javascript·vue.js
是个热心市民1 小时前
构建一个导航栏web
前端·javascript·python·django·html
J不A秃V头A2 小时前
报错:npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。
前端·npm·node.js
GDAL2 小时前
npm入门教程14:npm依赖管理
前端·npm·node.js
余生H2 小时前
即时可玩web小游戏(二):打砖块(支持移动端版) - 集成InsCode快来阅读并即时体验吧~
前端·javascript·inscode·canvas·h5游戏
5335ld2 小时前
vue+exceljs前端下载、导出xlsx文件
前端·vue.js
摇头的金丝猴2 小时前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts