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

Question

我发现了一个奇怪的行为，我无法在<button>元素中选择一个文本。例如，请尝试在Bootstrap的这些按钮中选择一个文本：http://getbootstrap.com/components/#list-group-buttons

是标准行为还是可编辑的？我需要在按钮中选择文字。

Answer 1

您可以执行与this question相反的操作： 创建以下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;
}

并链接样式表。它适用于我的Firefox。

编辑：正如Nenad Vracar所说，将“all”更改为“text”。它现在适用于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>

<强> Fiddle

Answer 3

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

游标：指针