用於<input type =「？」的CSS選擇器

Question

有沒有什麼方法可以根據CSS的類型來定位所有輸入？我有一個禁用的類，我使用各種禁用的表單元素，我設置文本框的背景顏色，但我不希望我的複選框獲得該顏色。

我知道我可以用單獨的類來做到這一點，但我寧願使用CSS，如果可能的話。我敢肯定，我可以在JavaScript中設置它，但是再次尋找CSS。

我針對的是IE7 +。所以我不認爲我可以使用CSS3。

編輯

隨着CSS3我將能夠做這樣的事情？

INPUT[type='text']:disabled這將是更好的擺脫我乾脆類的......

編輯

好感謝您的幫助！因此，這裏是它修改已無需設置任何類，當我開始這個問題我從來沒有想過這是可能的禁用的所有文本框和領域選擇...

INPUT[disabled][type='text'], TEXTAREA[disabled] 
{ 
    background-color: Silver; 
} 

這個作品在IE7

Answer 1

是。IE7 +支持屬性選擇：

input[type=radio] 
input[type^=ra] 
input[type*=d] 
input[type$=io] 

與包含一個值，它等於，開頭，包含或具有一定的值結束的屬性類型元素的輸入。

其他安全（IE7 +）選擇是：

• 父>子有：p > span { font-weight: bold; }
• 由〜元素在之前是：span ~ span { color: blue; }

這對於​​將有效地爲您提供：

<p> 
    <span style="font-weight: bold;"> 
    <span style="font-weight: bold; color: blue;"> 
</p> 

毛皮它讀： Browser CSS compatibility on quirksmode.com

我很驚訝，其他人都認爲它不能做。 CSS屬性選擇器已經有一段時間了。我想是時候清理我們的.css文件了。

Answer 2

對不起， 最簡潔的答案是不。 CSS（2.1）只會標記DOM的元素，而不是它們的屬性。你必須爲每個輸入應用一個特定的類。

Bummer我知道，因爲那會非常有用。

我知道你說過你更喜歡CSS over JavaScript，但你仍然應該考慮使用jQuery。它爲基於屬性的DOM元素添加樣式提供了一種非常乾淨優雅的方式。

Answer 3

你可以用jQuery做到這一點。使用它們的選擇器，您可以按屬性（如類型）進行選擇。然而，這確實需要你的用戶打開Javascript和一個額外的文件下載，但如果它的工作...

Answer 4

可悲的是，其他海報是正確的，你 ...實際上通過kRON，你確定你的IE7和嚴格的doc，但我們大多數人與IE6的要求都減少到JS或類參考爲此，但它是一個CSS2屬性，只有一個沒有足夠的支持來自IE^h^h瀏覽器。

出於完整性，類型選擇器（類似於xpath）的形式爲[attribute=value]，但存在許多有趣的變體。它將是相當強大的，當它是可用的，好東西保持在你的頭IE8。

• w3 reference

• browser support reference