2012-03-31 115 views
5

我需要與所有輸入標籤匹配的CSS選擇器,其中類型爲而不是checkbox選擇類型不是複選框的所有輸入標籤

本場比賽:

<input value="Meow!" />

<input type="password" />

...但是這並沒有

<input type="checkbox" />

由於類型爲checkbox

這是我的時刻:

input:not(type="checkbox")

不幸的是,它不工作

所以這纔是我的問題:

  1. 如何解決我的CSS3選擇?
  2. 是否有可能沒有CSS3和JavaScript?
  3. 是否有可能沒有CSS3,但使用JavaScript?

感謝您的任何建議!

回答

17
  1. 你的屬性選擇缺少方括號:

    input:not([type="checkbox"]) 
    
  2. 如果你申請的風格,你將需要進行使用替代規則的CSS:

    input { 
        /* Styles for all inputs */ 
    } 
    
    input[type="checkbox"] { 
        /* Override and revert above styles for checkbox inputs */ 
    } 
    

    正如你可以想象的,對於表單元素來說這幾乎是不可能的,因爲它們的瀏覽器默認樣式在CSS中沒有很好的定義。

  3. jQuery提供一個:checkbox selector,您可以使用:

    $('input:not([type="checkbox"])') 
    
+0

感謝:

$('input:not(:checkbox)') 

你也可以爲你在CSS中確實使用了同樣的選擇!我得到的一個想法 - 我可以定義除「複選框」之外的所有可能的輸入類型,並將自定義CSS應用於它們。然後,只有沒有指定類型的'input'標籤纔會失敗。 – daGrevis 2012-03-31 14:14:46

+0

@daGrevis:是的,這是一個很好的選擇。無論如何,你應該避免使用'input'元素。 – BoltClock 2012-03-31 14:15:57

+0

這是爲什麼?它的HTML5有效並且更易於輸入。 – daGrevis 2012-03-31 14:20:00

1

input:not([type="checkbox"])

+0

應該更頻繁地刷新頁面... :) – 2012-03-31 14:08:49