Is there a CSS selector for any field the user enters?

Question

I want to create a common style for all the elements where the user selects (either with the mouse or by tapping on the touch screen), and then enters the text with the cursor. It 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 possibly other examples), due to <textarea> (which belongs to this category) and <input type='submit'> (this is not so) you cannot just select all <input> .

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

Answer 1

No no.

Or you go with lists

 input, textarea {...} 

or you use a css preprocessor (for example, sass) and make yourself a mixin or function that processes all of these types. But you cannot get around the definition of all these elements at some point.

Answer 2

I would use the 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 will use a style based on this class. Although this may not be as automatic as you want it, it provides you the most control and allows you, for example, to avoid styling submit buttons.

You can also do the reverse, of course, and have a "non-user-input" class, which will then be placed in things like a submit button. Then you press <input> , <textarea> , etc.

This may be more suitable for your needs.

Answer 3

No, there is no field for this, but you can combine selectors with commas and style them all together as follows:

 input[type="text"], input[type="search"], input[type="password"], textarea { /* your styles here */ } 

I think this is the only way to do this.

Answer 4

You can simply use the: focus pseudo-family in CSS yourself to select any selected HTML element.

CSS

 :focus { /* whatever you want to do to all selected elements */ } 

Here's a JS script showing how it works:

http://jsfiddle.net/vbdgenwz/