Как выбрать <input>, который не имеет "типа" с CSS

У меня здесь 3 <input> в моем HTML:

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

И я могу выбрать нижние два с помощью этих CSS:

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

Но я не знаю, как выбрать первый, у которого нет типа.
Я пробовал:

input{
    color: red;
}

Но он изменит и другие два.

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

Это все еще не работает.
Любая идея?

Ответ 1

Селектор input[type=""] будет искать вход, у которого есть атрибут type, который установлен на пустой. Попробуйте использовать это:

input:not([type]) { }

См. jsFiddle.

Ответ 2

Другим подходом может быть использование Специфика CSS и применение общего стиля ко всем входным элементам, а затем применение более специальных стилей к входам с атрибутом type.:)

Ответ 3

Ваш лучший выбор для совместимости с несколькими браузерами, вероятно, просто определяет то, что вы хотите, а затем переопределяете его для любого другого типа ввода. то есть:

input {
    color: red;
}
input[type="button"],
input[type="submit"],
...
input[type="input"] {
    color: red;
}

Ответ 4

Dosen't работает в IE6

input[type="text"]:first-child

ИЛИ

#form input[type="text"]:first-child

Ответ 5

Возможно, вы могли бы добавить атрибут id или class на вход, который хотите настроить. Так, например:

Name: <input id="name-input">

Затем в вашем css:

#name-input
{
   color: red
}