2012-04-11 13 views
0

私はjQuery Validate Pluginを使用してエラーを強調表示します。これは、テキストの色を赤で置き換えます。これは1つを除くすべての要素でOK - .help-block、青のままにしておきます。ここでjQueryをオーバーライドする方法は、テキストの色を検証しますか?

はエラーなしでコードです:

<div class="control-group"> 
    <label class="control-label" for="place-of-birth">Place of birth</label> 
    <div class="controls"> 
     <p class="help-block">Please input place of birth below, 2-80 symbols</p> 
     <input type="text" class="input-xlarge" id="place-of-birth" name="place-of-birth" minlength="2" maxlength="80" autocomplete="off"> 
    </div> 
</div> 

そしてここでは、エラーメッセージが表示されている:

<div class="control-group error"> <!-- STYLE IS CHANGED HERE --> 
    <label class="control-label" for="place-of-birth">Place of birth</label> 
    <div class="controls"> 
     <p class="help-block">Please input place of birth below, 2-80 symbols</p> 
     <input type="text" class="input-xlarge" id="place-of-birth" name="place-of-birth" minlength="2" maxlength="80" autocomplete="off"> 
     <div class="help-block" generated="true" for="place-of-birth">Please enter at least 2 characters.</div> <!-- THIS LINE IS ADDED --> 
    </div> 
</div> 

私は、次のCSSでそれを上書きしようとしました:

.control-group .error .help-block { color: blue; } 

しかし、それは役に立たなかった。 Demo

ここで何が間違っていますか?

答えて

1

このような変更を:

.control-group.error .help-block { color: blue; } 

あなたは一つの要素に2つのクラスを持っている場合は、セレクタの間にスペースがあることはできません。スペースがある場合は、このクラスが子タグに属することを意味します。

0

CSSルールはこれです:

.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on { 
    color: #B94A48; 
    background-color: #F2DEDE; 
    border-color: #B94A48; 
} 

bootstrap.cssファイルのいずれかでこれらの値を変更したり、独自作ります。

関連する問題