CSS 伪类输入:not(disabled)not:[type="submit"]:focus
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9207304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css pseudo classes input:not(disabled)not:[type="submit"]:focus
提问by BurebistaRuler
I want to apply some css for inputs elements and I want to do that only for inputs that are not disabled and are not submit type, below css is not working, maybe if someone can explain me how this must be added .
我想为输入元素应用一些 css,我只想为未禁用且未提交类型的输入执行此操作,css 下面不起作用,也许如果有人可以解释我必须如何添加。
input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}
回答by Wesley Murch
Instead of:
代替:
input:not(disabled)not:[type="submit"]:focus {}
Use:
用:
input:not([disabled]):not([type="submit"]):focus {}
disabled
is an attribute so it needs the brackets, and you seem to have mixed up/missing colons and parentheses on the :not()
selector.
disabled
是一个属性,因此它需要括号,而您似乎在:not()
选择器上混淆了/缺少冒号和括号。
Demo: http://jsfiddle.net/HSKPx/
演示:http: //jsfiddle.net/HSKPx/
One thing to note: I may be wrong, but I don't think disabled
inputs can normally receive focus, so that part may be redundant.
需要注意的一点:我可能是错的,但我认为disabled
输入通常无法获得焦点,因此该部分可能是多余的。
Alternatively, use :enabled
或者,使用 :enabled
input:enabled:not([type="submit"]):focus { /* styles here */ }
Again, I can't think of a case where disabled input can receive focus, so it seems unnecessary.
同样,我想不出禁用输入可以接收焦点的情况,因此似乎没有必要。
回答by Gavin
Your syntax is pretty screwy.
你的语法很糟糕。
Change this:
改变这个:
input:not(disabled)not:[type="submit"]:focus{
to:
到:
input:not(:disabled):not([type="submit"]):focus{
Seems that many people don't realize :enabled
and :disabled
are valid CSS selectors...
似乎很多人没有意识到:enabled
并且:disabled
是有效的 CSS 选择器......
回答by PatrikAkerstrand
You have a few typos in your select. It should be: input:not([disabled]):not([type="submit"]):focus
您的选择中有一些错别字。它应该是:input:not([disabled]):not([type="submit"]):focus
See this jsFiddlefor a proof of concept. On a sidenote, if I removed the "background-color" property, then the box shadow no longer works. Not sure why.
请参阅此jsFiddle以获取概念证明。在旁注中,如果我删除了“背景颜色”属性,则框阴影不再有效。不知道为什么。