SCSS/CSS selector to select all input types

Question

I have some input type has this scss setting (from the framework)

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
...
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
{
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
}

I like to override/reset all, something similar

textarea,
input[type="*"],
{
  @include box-shadow(none);
}

above doesn't work, Also

textarea,
    input,
    {
      @include box-shadow(none);
    }

not specific enough. Is there a way to do this than listing all possible types.

Thanks.

what exactly is not specific enough about `input` without a type qualifier? All input fields have a type; if it's missing, it defaults to `text`. — Spudley, Aug 06 '13 at 16:10
possible duplicate of [SASS: Create mixin for input fields](http://stackoverflow.com/questions/13180807/sass-create-mixin-for-input-fields) — cimmanon, Aug 06 '13 at 16:49
Related: http://stackoverflow.com/questions/17369600/using-scss-sass-mixin-to-return-a-string-value — cimmanon, Aug 06 '13 at 16:51

Louis Ricci · Accepted Answer · 2013-08-06T16:26:20.150

57

There are a lot of possible input types. If you want textareas and any input that has a type attribute then...

textarea,
input[type] {
    ...
}

If you want to exclude some input types then use the :not selector. EDIT EXAMPLE JSFIDDLE http://jsfiddle.net/Pnbb8/

textarea,
input[type]:not([type=search]):not([type=url]):not([type=hidden]) {

}

But like I said there are probably a lot more types you DON'T want than types you DO want, so you can't really avoid the list.

You could always use a CSS class instead.

.box-shadowed
{
  @include box-shadow(none);
}

edited Aug 06 '13 at 16:26

answered Aug 06 '13 at 16:14

Louis Ricci

20,804
5
48
62

1

You can't use `:not()` like that in CSS - see http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css – BoltClock Aug 06 '13 at 16:17
@BoltClock - You were right that my syntax was wrong, but I've corrected the syntax and you can chain nots like :not([type=type1]):not([type=type2]) http://jsfiddle.net/Pnbb8/ try it out in the latest FF or Chrome – Louis Ricci Aug 06 '13 at 16:29
I know. I said the same thing in my own answer to the linked question. – BoltClock Aug 07 '13 at 01:25
1

Just a note on that second method with the chain of nots: each not adds to the specificity of that selector. I ran into a situation of wanting to override one of the styles on the number input but the changes don't take because input[type="number"] specificity is less than input[type]:not(...):not(...)..... – Mike May 21 '20 at 19:53
@Mike just to be a bit more explicit (in case anybody is trying to calculate the actual specifity and it's not coming out right), [selectors inside the negation pseudo-class add to the specifity, not the negation itself.](https://www.w3.org/TR/selectors-3/#specificity) – compuphys Mar 23 '21 at 09:06

score 9 · Answer 2 · edited Jan 14 '22 at 19:24

Will this suffice?

input[type="text"] {
    border: 1px red;
}

input[type] {
    border: 1px solid blue;
}

They both have the same specificity, so the last one overrides.

See jsFiddle

Another solution would be to ommit the element from the first selector. The latter would have higher specificity – however, you should know that in terms of performance, the first one is similar to using an universal selector (as it attempts to match all elements in the DOM, to check for the attribute).

[type="text"] {
    border: 1px red;
}

input[type="text"] {
    border: 1px solid blue;
}

SCSS/CSS selector to select all input types

2 Answers2

Linked