帶有twitter引導文本字段的jQuery addClass

一位朋友和我正在構建一個jQuery Form Creator/Validator插件，而且我們還使用twitter bootstrap，因爲它有漂亮的css元素！帶有twitter引導文本字段的jQuery addClass

當用戶點擊提交按鈕時，我們希望將一個類（使輸入框陰影爲紅色）應用於所需的表單元素。

這適用於除文本以外的所有表單元素。顯然，twitter bootstrap css在某種程度上與該類衝突。該類被添加到元素，但沒有任何反應。

如果有人在外可以給我們一個提示，我們將不勝感激！

這是我們正在建設（這是一個簡單的版本，當然）代碼： http://jsfiddle.net/rdenadai/Hr9Gj/5/

謝謝！

來源

2012-08-23 rdenadai

Bootstrap的CSS規則優先於您的規則，因爲它們更具體，特別是input[type="text"]規則。要覆蓋他們來說，!important聲明添加到您的樣式：

.required { 
    border:1px solid rgba(196, 39, 39, 0.3) !important; 
    -webkit-box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3) !important; 
    box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3) !important; 
}

DEMO

來源

2012-08-23 20:11:27

老兄！太棒了，我永遠不會想到那個（或者在某些時候我會）！ – rdenadai

@rdenadai：Twitter Bootstrap有時可能會非常棘手:)。隨意標記我的答案爲接受然後http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work謝謝， –

我的榮幸！你的答案確實做到了這個工作......我在bootstrap上很新，但是一個很棒的工具！ – rdenadai

你的CSS不是指定輸入字段專門不夠，引起引導到覆蓋它。試試這個：

input[type="text"].required { 
    border:1px solid rgba(196, 39, 39, 0.3); 
    -webkit-box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3); 
    box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3); 
}

來源

2012-08-24 10:16:32

Joao答案解決了我的問題！感謝更進一步的反饋人......這個帖子可以關閉！ – rdenadai

帶有twitter引導文本字段的jQuery addClass

回答

相關問題