How to select <input> that has no "type" with CSS

Question

I here have 3 <input>s in my HTML:

Name: <input><br> Age: <input type="number"><br> Site: <input type="url"> 

And I can select the bottom two with these CSS:

input[type="number"]{     color: gray; } input[type="url"]{     color: blue; } 

But I don't know how to select the first one that has no type.
I tried:

input{     color: red; } 

But it will change the other two as well.

input[type=""]{     color: red; } 

This is still not working.
Any idea?

Answer 1

The selector input[type=""] will look for an input that has the attribute type which is set to empty. Try using this:

input:not([type]) { } 

See the jsFiddle.

Answer 2

Another approach could be to use CSS Specificity, and apply a general style to all input elements, then apply more specific styles to inputs with type attribute. :)