1

友人と私は jQuery Form Creator/Validator プラグインを作成しています。また、美しい css 要素のために Twitter ブートストラップも使用しています!

ユーザーが送信ボタンをクリックすると、必要なフォーム要素にクラス (入力ボックスの影を赤にする) を適用します。

これは、テキストを除くすべてのフォーム要素で機能します。どうやらTwitterのブートストラップcssが何らかの形でクラスと競合しているようです。クラスが要素に追加されますが、何も起こりません。

誰かが私たちにヒントを与えることができれば、私たちはそれを感謝します!

これが私たちが構築しているコードです (もちろん、これは単純なバージョンです): http://jsfiddle.net/rdenadai/Hr9Gj/5/

ありがとう！！

4

2 に答える 2

2

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;
}
​

デモ

于 2012-08-23T20:11:27.260 に答える
0

CSS が入力フィールドを具体的に十分に対象としていないため、Bootstrap がそれをオーバーライドします。これを試して：

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-24T10:16:32.560 に答える