User select:none causes input field to be inaccessible on Safari

Question

With these css styles I prevent the highlighted text selection on a page. But this causes the input fields to be locked from user input on Safari.

* {
-webkit-touch-callout: none;
-webkit-user-select: none; // locks fields on Safari
-khtml-user-select: none; // locks fields on Safari
-moz-user-select: none;
-ms-user-select: none;
user-select: none;      
}

Is there a way on Safari to prevent user selection without interfering with input fields?

score 28 · Accepted Answer · answered May 30 '12 at 15:42

28

Why not just apply the style to everything but the inputs?

css3 way: *:not(input){...}

answered May 30 '12 at 15:42

Tom Pietrosanti

4,184
2
24
29

Don't forget the textareas: `*:not(input textarea){...}` – tomas polach Oct 11 '14 at 21:45
11

@tomaspolach your syntax is incorrect. The correct syntax is: *:not(input):not(textarea) – Allan Nienhuis Jun 22 '15 at 22:54

score 4 · Answer 2 · answered Feb 05 '20 at 13:31

Nothing new :)

*:not(input, textarea){
    -webkit-touch-callout: none;
    -webkit-user-select: none; // locks fields on Safari
    -khtml-user-select: none; // locks fields on Safari
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

score 1 · Answer 3 · answered Sep 14 '16 at 10:02

For every cases in css:

*:not(input), *:focus:not(input) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline-style:none;/*IE*/
}

score 0 · Answer 4 · answered Sep 18 '13 at 14:07

0

I needed something a little more precise.

input[type=text] 
{
  -webkit-user-select: text;
}

input[type=password]
{
  -webkit-user-select: all;
}

answered Sep 18 '13 at 14:07

Richard Kenny

104
1

whats the difference in terms of functionality? sorry i know i can try it, just really busy... – Craig Wayne Nov 11 '13 at 06:36
This will only select the specific input elements with the type attribute set to text or password. This is required for older browsers that don't support `not`. However, I would do this: `* { ... user-select: none; } input { ... user-select: text; }` – Timothy Zorn May 15 '15 at 19:39

User select:none causes input field to be inaccessible on Safari

4 Answers4

Linked