[csswg-drafts] [css-selectors] Selectors for “text-ish” and “button-ish” inputs

keithjgrant has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-selectors] Selectors for “text-ish” and “button-ish” inputs ==
Spec: https://drafts.csswg.org/selectors/

In almost every project I do, I want to style all text-like inputs the same way. But targeting those, while not targeting button-like `<input>`s is tricky. I usually end up doing either of these solutions:

```css
input[type="text"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"],input[type="password"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"], input[type="color"], textarea {
  …
}

/* or */

input:not([type="button"], [type="submit"], type="reset"), textarea {
  …
}
```

Both of these are more verbose than they should be, and they feel prone to breakage if/when new input types are added to HTML later on. I think there should be a pseudo-class to target all “text-ish” inputs.

Buttons are not quite as bad, but still tedious:

```css
button, input[type="button"], input[type="submit"], input[type="reset"] {
  …
}
```

A pseudo-class shorthand for this would be useful as well.

And finally, a third pseudo-class to target checkboxes and radio buttons together (equivalent to `input[type="checkbox"], input[type="radio"]`).

Possible names for these pseudo-classes could be `:text`, `:button`, and `:toggle`.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2296 using your GitHub account

Received on Friday, 9 February 2018 15:29:15 UTC