ionic 2: How to make text selectable?

Question

I want users to be able to select text content (in ionic 2) so that they can copy it and paste it elsewhere, but it seems that text selection has been disabled. Users can select text that is in an input or a textarea, but I want them to be able to select even regular content text. Is there a way to re-enable text selection?

score 60 · Accepted Answer · answered Sep 26 '17 at 23:05

60

I added

body {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}

to the app.scss file

For individual items, since this is SCSS, you can also create a mix-in with those 4 css lines. Keep in mind Safari or other browsers may not respond well to just user-select.

answered Sep 26 '17 at 23:05

Dmitri R117

2,502
23
20

6

`user-select: auto` is needed to make text selectable on Android and iOS. `user-select: text` only works for Android. – tala9999 Aug 15 '18 at 15:07
for ionic v4 you dont find app.scss, just create one and add in it. – kishorekumaru Feb 06 '19 at 23:47

score 16 · Answer 2 · answered Nov 18 '16 at 08:42

16

You need to add the following CSS to the HTML tag you want to be selectable

user-select: text;

answered Nov 18 '16 at 08:42

Alexander Ciesielski

10,506
5
45
66

hey, i tried to do . ion-item{ user-select: text; } and it's not working. – Manspof Nov 18 '16 at 08:54
1

This worked for me! Ionic 2 with Angular 2. Changed it to auto instead of text though, so it is not limited to text. – Kevin Van Ryckegem Mar 16 '17 at 21:12
1

`user-select: auto !important` works with Ionic2. Its sometimes so hard to override core styles on Ionic2 that `important`is needed for this – Romain Bruckert May 23 '17 at 07:27

score 3 · Answer 3 · answered Mar 30 '19 at 20:48

3

For my Ionic 4 project, using the body tag didn't work but this did:

* {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

answered Mar 30 '19 at 20:48

Matthew

2,871
5
34
59

score 2 · Answer 4 · answered Jan 22 '20 at 19:51

In Ionic 4 add

* {

    -webkit-user-select: text;
    
    -moz-user-select: text;
    
    -ms-user-select: text;
    
    user-select: text;
    
    }

**to the global.scss file. ** But if you want to copy/paste only a specific tag text, add something like this instead in your global.scss:

.selectable {

    -webkit-user-select: text;
    
    -moz-user-select: text;
    
    -ms-user-select: text;
    
    user-select: text;
    
    }

And then add class="selectable" property to the tag.

Hope it helps

Dan · Answer 5 · 2020-07-17T18:10:40.957

You do not have to use the wildcard selector to apply the fix like others have stated. If you use remote debugging in the browser, you can select any element and find what is setting its styles.

Open dev tools
Select the element you want to inspect with Ctrl + Shift + C
Go to the computed tab
Find the style, in this case, user-select
Click on the none option underneath

It should take you to where it's being set. html.plt-mobile ion-app is the CSS selector being applied. Now all you have to do is target that selector in your own stylesheet.
```
html.plt-mobile ion-app {
     -webkit-user-select: auto;
     -moz-user-select: auto;
     -ms-user-select: auto;
     user-select: auto;
}
```

ionic 2: How to make text selectable?

5 Answers5

Linked