如何用光标在 <button> 元素中选择文本？

Question

我发现了一个奇怪的行为，我无法在

<button>

元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择文本：http://getbootstrap.com/components/#list-group-buttons

这是一些标准行为还是可以编辑？我需要选择按钮中的文本。

Answer 1

您可以做这个问题的相反操作： 创建以下 CSS3：

.list-group-item{
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}

并链接样式表。它适用于我的火狐浏览器。

编辑：将“全部”更改为“文本”，正如 Nenad Vracar 所说。现在它可以在 Chrome 和 Firefox 中运行

Answer 2

可以设置

user-select: text

button {
  -webkit-user-select: text;  /* Chrome all / Safari all */
  -moz-user-select: text;     /* Firefox all */
  -ms-user-select: text;      /* IE 10+ */
  user-select: text;
}

<div class="col-sm-4">
  <div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
</div>

小提琴

Answer 3

以上答案均不适用于 Safari。如果该按钮仅用于显示，并且您同意它不再发送

onClick

事件，则可以使用

pointer-events: none

使其在 Safari 中正常工作。

button {
  -webkit-user-select: text;  /* Chrome */
  -moz-user-select: text;     /* Firefox */
  -ms-user-select: text;      /* IE 10+ */
  user-select: text;
  pointer-events: none;       /* Safari */
}

Answer 4

您可以像这样为按钮定义 css 属性 对于按钮类添加光标：指针属性。 您可以直接指定按钮或自定义 CSS 类

光标：指针