How to select a text with a cursor in a

Question

I found a strange behavior, I cannot select a text in a <button> element. As an example, please try to select a text in these buttons of Bootstrap: http://getbootstrap.com/components/#list-group-buttons

Is it some standard behavior or is it editable? I need to select text in buttons.

From my reading `button` with the type of *button* have no default behaviour so this is likely to be browser dependent. Arguably, if the text is to be selectable...a button would not be suitable/appropriate. — Paulie_D, Dec 28 '15 at 13:38
I can select the text just fine. Click outside of the element and drag across. — epascarello, Dec 28 '15 at 13:40
@epascarello, yeah, right) But it is not an option in my case — Green, Dec 28 '15 at 13:54
Well when you drag on a button, it does not select the text... — epascarello, Dec 28 '15 at 13:55

score 14 · Answer 1 · edited Jun 20 '20 at 09:12

14

You could do the reverse of this question: create the following 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;
}

and link the stylesheet. It works on my firefox.

Edit: changed "all" to "text" as Nenad Vracar said. It works in Chrome and Firefox for me now

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 28 '15 at 13:37

Appelemac

192
6

1

No, doesn't work in Chrome, `47.0.2526.106 m`. Yes, it looks like it is a browser behavior. – Green Dec 28 '15 at 14:02
Old comment, but just to confirm, tested and it do work in Mac Chrome 69 and Mac Firefox 6 at least. But it does not work in Safari 12. It do work with `user-select: all` though. But then the user can't choose to only select a single word, everything in that container is selected. – Jonas Sandstedt Oct 17 '18 at 14:01

score 7 · Answer 2 · answered Dec 28 '15 at 13:57

You can set 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

I would suggest this prefix-stack: `-webkit-user-select: all; -moz-user-select: text; -ms-user-select: text; user-select: text;` This because Safari doesn't support `user-select: text` on Buttons for some reason. — Jonas Sandstedt, Oct 17 '18 at 14:09

score -2 · Answer 3 · answered Dec 28 '15 at 13:40

-2

You can define css property for button like this For button class add cursor:pointer property. You can specify either to button directly or to your custom CSS class

cursor : pointer

answered Dec 28 '15 at 13:40

Krishna S

27
3

This does nothing to answer the question *actually asked* – Paulie_D Dec 28 '15 at 13:42

How to select a text with a cursor in a element?

3 Answers3

How to select a text with a cursor in a