如何使用CSS定位文本輸入字段？

Question

假設你有下面的HTML：

<input /> 
<br /> 
<input type=text /> 

當然，在我的HTML我有其他類型的輸入域，以及（複選框，等等）。現在我只想設置文本輸入的樣式。

我發現了什麼搜索時，是做在CSS如下：

input[type=text] { background: red; } 

對於第二個輸入，其中屬性是明確目前，這一工作。然而，對於第一個，它在IE8中工作，但不在IE10中。也不在Chrome中。

那麼我該如何定位所有的文本輸入字段，只有文本輸入字段，而不必把type=text放在哪裏？

您可以在jsFiddle中看到此內容。對於IE8，看看如何獲​​得的jsfiddle工作these instructions，但它看起來像這樣：

Answer 1

如果您希望能夠省略type="text"並仍然使選擇器匹配，你將不得不使用not psuedoselector提供CSS3：

input[type="text"], input:not([type]) { 
    ... 
} 

http://jsfiddle.net/dByqP/5/

這不會降低版本的IE的工作，如CSS3沒有很好地在這些瀏覽器的支持。

最好的解決方案是通過並將type="text"添加到您的文本輸入並使用您的原始選擇器。

Answer 2

一個痛苦的，但肯定的方式可以做的是設置樣式的簡單

input { 
    /* ... */ 
} 

這將針對在每個瀏覽器的文本輸入，那麼你可以做你在做什麼，並針對每一個類型的輸入，這不是一個文本輸入：

input[type=range] {} 
input [type=phone] {} 
// etc. 

這樣，即使瀏覽器不支持CSS3中不支持的：not運算符，仍然可以使其工作...

Answer 3

樣式使用類和CSS輸入：

.redBG 
{ 
    background: red; 
} 

那麼你的HTML是：

<input class="redBG" /> 

附jsFiddle。

Answer 4

我的建議是對輸入的默認樣式是

input { 
    background-color: red; 
} 

然後覆蓋該樣式的其他東西，如果需要，例如藍色按鈕

input[type='button'] { 
    background-color: blue; 
} 

當然，你需要的

去爲特定的輸入類型指定特定的樣式，但這並不意味着你不會完成它，如果你想要一個獨特的按鈕。