CSS selector for general textboxes

Question

Is there a way to select every kind of textbox with a CSS selector to give them all the same width, for instance? By textbox, I simply mean something that the user can type into.

My problem is that there are so many of them. It used to be reasonably straightforward; you only had 2 types of textbox with HTML4. These two types were text and password, so the CSS could be

input:not([type]), input[type='text'], input[type='password'] {...}

This would cover all of the types. However, with the invention of HTML5, you get many more types, such as number, email, url, search and tel, that all look and behave the same (except for what you're supposed to type into them), and I'd like to address them all in the same way through CSS.

Is it absolutely necessary to write all of this?

input:not([type]),
input[type='text'],
input[type='password'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='search'],
input[type='tel'] {...}

Is there possibly a much more code efficient way of writing this?

Answer 1

Do saner solutions exist?

How about a good old fashion class?

<input class='text' type='text'>

or overriding the types that are not text

input {
    background: red;
}

input[type=radio], input[type=checkbox], input[type=submit] {
    background: yellow;
}

---

Additionally: In my books there is nothing really wrong with your solution.

You just need to add the new html5 input types:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Answer 2

A Few Thoughts On Reducing Selectors

Using information from mozilla...

Assuming you set a placeholder attribute on the relevant inputs, then you can capture text, search, tel, url or email with input[placeholder].

If instead you consistently set size or maxlength for only those text inputs they are valid for, then you can capture password along with those listed above in a similarly succinct selector input[size] or input[maxlength].

All three dates can be caught by input[type^=date].

Lowest Denominator for Type Matching Selectors

This uses size to reduce the total to nine (at present), but maxlength might be preferred, or placeholder in which case the additional input[type=password] would need added to make ten:

input:not([type]), /* all non-declared types */
input[size], /* text, search, tel, url email, or password */
input[type^=date], /* date, datetime, datetime-local */
input[type=color],
input[type=week],
input[type=month],
input[type=time],
input[type=number],
input[type=range] {
   /* styles */
}

If you are just concerned with the eight types noted in your question, then it reduces further (assuming they are being given size or optionally maxlength to replace size below) to:

input:not([type]), /* all non-declared types */
input[size], /* text, search, tel, url email, or password */
input[type=number] {
   /* styles */
}