CODEWITHSUNDEEP
htmlcsscss-selectors
Marc
Marc

Reputation: 3894

css selector: exclude input/textarea elements

I try to simple disable text selecting on the page, except input fields like <input> or <textarea>

*,
::selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
}
<input type="text" value="text" />
<input type="number" value="69420" />

<textarea>
foo bar
</textarea>

Foo bar text on the site

I wanted to use the :not() selector since, writing every rule for every input element seems a bit hacky, and a explicit exclusion seems a better approach.

So i tried the following:

*:not(input):not(textarea),
::selection::not(input):not(textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
}

The problem is, the css above does simple not work. You can select whatever you want.

How can i exclude input/textarea elements from the css selector in the first snippet?

EDIT:

I just discoverd, when i remove the pseudo selector ::selection, the :not() selector works:

* :not(input):not(textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
}

Keep it open, perhaps some one has a better solution / can add some explanation.

Upvotes: -1

Views: 293

Answers (1)

Temani Afif
Temani Afif

Reputation: 272955

::selection should be at the end of the selector:

*:not(input):not(textarea),
:not(input):not(textarea)::selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
}
<input type="text" value="text" />
<input type="number" value="69420" />

<textarea>
foo bar
</textarea>

Foo bar text on the site

Upvotes: 1

Related Questions