W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2018

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

From: Keith Grant via GitHub <sysbot+gh@w3.org>
Date: Fri, 09 Feb 2018 15:28:57 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-295908485-1518190136-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:24 UTC