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

Question

У меня здесь есть 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;
}

Это все еще не работает.
Есть идеи?

Answer 1

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

input:not([type]) { }

См. JsFiddle.

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Тогда в вашем css:

#name-input
{
   color: red
}

Answer 5

Не работает в IE6

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

OR

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