Chosen.jsのCSSをJQueryで変更する

Question

まずコードを含めないことを謝罪しますが、selected.jsプラグインを使用しているので、何を含むべきかはわかりません。私が実行している問題は、jqueryを使用してselected.js select要素のCSSを変更したいということです。 selected.cssファイルでCSSを変更できますが、jqueryを使用して変更することはできません。以下のコードは、通常の入力タイプ=テキスト上で動作しますが、私の選択した.jsドロップダウンリストにはありません。以下は、私が使用していますいくつかのコードスニペットです：

HTML：

<select class="chosen frm-field" id="program" name="program"> 
    <option selected="selected" value="0"></option> 
    <option value="1">Adult</option> 
    <option value="2">Dislocated Worker</option> 
    <option value="3">In-School Youth</option> 
    <option value="4">Out-of-School Youth</option> 
</select> 

jqueryの：

$('#program').css({ 
    '-webkit-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)", 
    '-moz-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)", 
    'box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)"}).trigger("chosen:updated"); 

：

function showErrors() { 
    $('#program').css({ 
    '-webkit-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)", 
    '-moz-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)", 
    'box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)"}); 
} 

が選ばJS .triggerまだ運を追加しようとしました

Chromeのレンダリングされたコード検査：

<select class="chosen frm-field error" id="program" name="program" style="display: none;"> 
    <option selected="selected" value="0"></option> 
    <option value="1">Adult</option> 
    <option value="2">Dislocated Worker</option> 
    <option value="3">In-School Youth</option> 
    <option value="4">Out-of-School Youth</option> 
</select> 
<div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 100%;" title="" id="program_chosen"> 
    <a class="chosen-single chosen-default"> 
     <span>Select One</span> 
     <div> 
     <b></b> 
     </div> 
    </a> 
    <div class="chosen-drop"> 
     <div class="chosen-search"> 
     <input type="text" autocomplete="off" readonly=""> 
     </div> 
     <ul class="chosen-results"> 
     <li class="active-result" data-option-array-index="1">Adult</li> 
     <li class="active-result" data-option-array-index="2">Dislocated Worker</li> 
     <li class="active-result" data-option-array-index="3">In-School Youth</li> 
     <li class="active-result" data-option-array-index="4">Out-of-School Youth</li> 
     </ul> 
    </div> 
</div> 

は、選択されたhtmlからselected.jsによって作成されたdivにidを変更しましたが、陰影は正しく表示されません。

新しいjqueryのコード：このコードを使用してシェーディングの

$('#program_chosen').addClass('error'); 

画像：

奇妙なことに、私は、CSSファイルで.chosen-container-single & .chosen-singleに直接国境シェーディングを追加する場合私が期待するようにボーダーが現れます。残念ながら、ユーザーがフォームを送信しても、オプションが選択されていない場合にのみ、これが発生します。画像は現在の動作を表示するには、以下である：

これを実現した後、私はまた、jqueryの経由.chosen-container-single & .chosen-singleにaddClass .errorを適用するために動作し、期待どおりに動作することがわかりました。これは、すべての選択に目的のシェーディングを適用します。私は#program_chosen.chosen-container-single #program_chosen.chosen-singleを試しましたが、何も起こりません...

私は近くにいるように感じますが、私は最終的な接続が不足しています。どんなアイデアも歓迎です！前もって感謝します！

- 悲しいことに、私はこれをほぼ一日中、簡単な問題であることを知りました。 Steveが、ボックスシェーディングを何度も繰り返し書くのではなく、addClassを利用してコードをクリーンアップするのを助けてくれてありがとう。問題は、selected.jsが作成していたdivの高さが、そのdiv内に含まれていたスペースよりも大きかったことです。私がしなければならなかったのは、selected.cssファイル内の高さを設定することでした。そして、魔法のように、ボックスシェーディングは完璧にフィットします。これはいくつかの他のものを通って、しかしいくつかのマージンを調整することによって単純に固定されました。これほど愚かではあるが、将来誰かが頭痛を避けるのを助けることを願っている。

Answer 1

クラスを使用してエラー状態を制御することをおすすめします。代わりにこれを試してみてください：もちろん

#program.error { 
    -webkit-box-shadow: 0px 0px 2px 2px rgba(255,0,0,1); 
    -moz-box-shadow': 0px 0px 2px 2px rgba(255,0,0,1); 
    box-shadow': 0px 0px 2px 2px rgba(255,0,0,1); 
} 

は、エラーがクリアされたときに、このクラスを削除する必要があるので、適切な時期にこれを実行します：

function showErrors() { 
    $('#program').addClass('error'); 
} 

は、このCSSを追加

$('#program').removeClass('error');