css选择器:排除输入/文本区域元素

huangapple go评论70阅读模式
英文:

css selector: exclude input/textarea elements

问题

我尝试在页面上简单禁用文本选择,除了输入字段,如<input><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;
}

我想要使用:not()选择器,因为编写每个输入元素的规则似乎有点巧妙,显式排除似乎是更好的方法。

所以我尝试了以下内容:

*: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;
}

问题是,上面的CSS并不起作用。您可以选择任何您想要的内容。

如何在第一个代码段中排除输入/文本区域元素的CSS选择器?

编辑:

我刚刚发现,当我移除伪选择器::selection时,:not()选择器起作用:

* :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;
}

保持打开,也许有人有更好的解决方案/可以添加一些解释。

英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

*,
::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;
}

<!-- language: lang-html -->

&lt;input type=&quot;text&quot; value=&quot;text&quot; /&gt;
&lt;input type=&quot;number&quot; value=&quot;69420&quot; /&gt;

&lt;textarea&gt;
foo bar
&lt;/textarea&gt;

Foo bar text on the site

<!-- end snippet -->

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:<br />

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.

答案1

得分: 1

::selection 应该位于选择器的末尾:

*: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;
}
英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

*: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;
}

<!-- language: lang-html -->

&lt;input type=&quot;text&quot; value=&quot;text&quot; /&gt;
&lt;input type=&quot;number&quot; value=&quot;69420&quot; /&gt;

&lt;textarea&gt;
foo bar
&lt;/textarea&gt;

Foo bar text on the site

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月9日 01:37:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/75049979.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定