Phonegap styles -webkit-user-select: none; disabling text field

Question

I'm pretty new to Phonegap. I have a problem where the default css used in a clean Phonegap project won't allow input into text fields. I narrowed it down to one line of CSS:

* {
            -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
            -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
            -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
            -webkit-user-select: none;                 /* prevent copy paste, to allow, change 'none' to 'text' */

    }

The problem line is:

-webkit-user-select: none;

This can be found in www/index.css.

Seems like completely disabling the input field isn't the desired effect.

I've also posted this problem 2 times before but it was closed, not sure why... My issue was closed due to not being a common problem. Well, all I can say about that is, I guess some users at stackoverflow don't think CSS 3, Phonegap, HTML 5, and -webkit-user-select: is a common situation. I'd beg to differ.

However I can see this issue also posted here, also causing problems in Safari: User select:none causes input field to be inaccessible on Safari Although slightly different.

My current solution is this:

-webkit-user-select: text; /* change 'none' to 'text' */

Just still curious as to what is the most elegant solution to enable the text input, but still maintain some of this copy and past functionality that Phonegap is trying to achieve. Thanks!

please do remember that there are devices out there with non Webkit browsers. — Spudley, Oct 22 '12 at 20:51

score 41 · Accepted Answer · answered Oct 22 '12 at 20:40

41

Try adding this to your css:

input {
    -webkit-user-select: auto !important;
}

This will override the text selection disabling that you have set on every single element (via the * selector) for input fields.

answered Oct 22 '12 at 20:40

Scott Thiessen

873
7
20

2

Downvoted for [using `!important`](http://stackoverflow.com/q/3706819). Anton's answer is better. – TachyonVortex Feb 23 '15 at 12:27

score 28 · Answer 2 · answered Apr 03 '13 at 13:16

28

Just add rules to css in this way:

*:not(input,textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

answered Apr 03 '13 at 13:16

Anton Taranovskyi

281
3
2

2

This is better than the currently accepted answer, because it [doesn't use `!important`](http://stackoverflow.com/q/3706819). However, in CSS 3, `:not()` can [only take a simple selector as an argument](http://www.w3.org/TR/css3-selectors/#negation). (In CSS 4, `:not()` will be [able to take a selector list as an argument](http://dev.w3.org/csswg/selectors-4/#negation).) For CSS 3, `*:not(input):not(textarea) {` should be used instead. – TachyonVortex Feb 23 '15 at 12:22
Both `*:not(input):not(textarea) {...}` and `*:not(input,textarea) {...}` did not fix anything on IOS, on my side(build with PhoneGap), but the SCCOTTT worked for me. – antogerva Mar 20 '15 at 16:35

score 5 · Answer 3 · answered Aug 06 '13 at 19:31

5

user-select can cause issues in elements with contenteditable="true" so better to add that too

  [contenteditable="true"] , input, textarea {
        -webkit-user-select: auto !important;
        -khtml-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
        -o-user-select: auto !important;
        user-select: auto !important;  
  }

answered Aug 06 '13 at 19:31

Sarath

9,030
11
51
84

I am facing the same issue in iPAD's safari and chrome. I was able to fix with this CSS works great main. Thanks a lot. – Srinivasa Rao Jun 29 '17 at 16:45

Phonegap styles -webkit-user-select: none; disabling text field

3 Answers3

Linked