如何禁用按钮的文本选中功能？前端新手求助

嘿，这个问题我做项目的时候也碰到过！按钮本来是用来交互点击的，不小心选中文本确实有点破坏用户体验，别担心，用几行CSS就能轻松搞定～

核心就是利用CSS的user-select属性，它可以控制用户是否能选中元素内的文本。我们只需要给按钮添加这个样式，就能阻止文本被选中：

/* 给你的按钮类添加这个样式 */
.your-button-class {
  /* 你的其他按钮样式，比如背景、颜色、圆角这些 */
  background: #4285F4;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  /* 关键属性：禁止文本选中 */
  user-select: none;
  /* 可选：兼容旧版浏览器的前缀 */
  -webkit-user-select: none; /* Safari 和 Chrome 旧版本 */
  -moz-user-select: none;    /* Firefox 旧版本 */
  -ms-user-select: none;     /* IE 和 Edge 旧版本 */
}

为什么这个方法有效？ #

user-select: none;会明确告诉浏览器：这个元素内的文本不允许被用户选中，不管是鼠标悬停拖拽还是双击，都不会触发文本选中的行为，完美解决你的问题。

如果你的按钮是用原生<button>标签写的，有些浏览器默认可能已经禁止了文本选中，但如果是用<div>、<span>这类标签模拟的按钮，就很容易出现这个问题，所以这个方法对所有类型的按钮都适用。

试试这个修改，你的按钮就只会专注于响应点击交互，不会再被误选文本啦！

内容的提问来源于stack exchange，提问作者Piotrek Borkowski