如何选择CSS没有“type”的<input />

Question

我的HTML中有3个<input>：

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]) { }

See the jsFiddle.

Answer 2

另一种方法可能是使用 CSS特性，并将常规样式应用于所有输入元素，然后将更多特定样式应用于具有type属性的输入。 ：）

Answer 3

跨浏览器兼容性的最佳选择可能只是定义您想要的内容，然后为其他所有类型的输入重新定义它。即：

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

Answer 4

不能在IE6中工作

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

OR

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

Answer 5

也许你可以在你想要定位的输入上添加id或class属性。例如：

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

然后在你的css中：

#name-input
{
   color: red
}