Search code examples
csscss-selectorspseudo-class

Css pseudo classes input:not(disabled)not:[type="submit"]:focus

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 .

input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}
Solution

  • 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.

    Demo: 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.

    Alternatively, use :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.