Is there a CSS selector for any field that the user types in?

Question

I want to create some common styling for all elements where the user selects (either with a mouse or tapping on in a touch screen) and then inputs text with a cursor. This includes:

• <input>
• <input type='text'>
• <textarea>
• <input type='password'>
• <another element that I didn't know existed that you can type into>

As you can see (and other examples probably), due to the <textarea> (which falls in this category) and <input type='submit'> (which doesn't) you can't just select all <input>'s.

Is there a special CSS (pseudo?) selector for this?

Answer 1

Nope, there isn't.

Either you go with lists

input, textarea {...}

or you use a css-preprocessor (e.g. sass) and make yourself a mixin or a function that handles all these types. But you won't get around defining all these elements at some point.

Answer 2

I'd use a css class:

<input class="user-input">
<input type='text' class="user-input">
<textarea class="user-input">
<input type='password' class="user-input">

And then you'd style based on that class. While this may not be as automatic as you desire, this provides you th most control and would allow you to avoid styling submit buttons for example.

You could also do the inverse, of course, and have a class "non-user-input" which then would be put on things like the submit button. Then you just target <input>, <textarea> and etc.

This might be more appropriate for your needs.