title: Change Chosen.js CSS with JQuery
body: <p>First my apologies for not including the code but I am not really sure what all to include since I am using the chosen.js plugin.  The issue I am running into is that I want to change the css of a chosen.js select element using jquery.  I am able to change the css in the chosen.css file but I am unable to change it using jquery.  The below code works on normal input type=text but not on any of my chosen.js dropdowns.  Below is a few code snippets that I am using:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;select class="chosen frm-field" id="program" name="program"&gt;
      &lt;option selected="selected" value="0"&gt;&lt;/option&gt;
      &lt;option value="1"&gt;Adult&lt;/option&gt;
      &lt;option value="2"&gt;Dislocated Worker&lt;/option&gt;
      &lt;option value="3"&gt;In-School Youth&lt;/option&gt;
      &lt;option value="4"&gt;Out-of-School Youth&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>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)"});
  }
  </code></pre>
  
  <p>tried adding Chosen js .trigger but still no luck:</p>
  
  <pre><code>$('#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");
  </code></pre>
  
  <p>Rendered code from Chrome Inspect:</p>
  
  <pre><code>&lt;select class="chosen frm-field error" id="program" name="program" style="display: none;"&gt;
     &lt;option selected="selected" value="0"&gt;&lt;/option&gt;
     &lt;option value="1"&gt;Adult&lt;/option&gt;
     &lt;option value="2"&gt;Dislocated Worker&lt;/option&gt;
     &lt;option value="3"&gt;In-School Youth&lt;/option&gt;
     &lt;option value="4"&gt;Out-of-School Youth&lt;/option&gt;
  &lt;/select&gt;
  &lt;div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 100%;" title="" id="program_chosen"&gt;
     &lt;a class="chosen-single chosen-default"&gt;
        &lt;span&gt;Select One&lt;/span&gt;
        &lt;div&gt;
           &lt;b&gt;&lt;/b&gt;
        &lt;/div&gt;
     &lt;/a&gt;
     &lt;div class="chosen-drop"&gt;
        &lt;div class="chosen-search"&gt;
           &lt;input type="text" autocomplete="off" readonly=""&gt;
        &lt;/div&gt;
        &lt;ul class="chosen-results"&gt;
           &lt;li class="active-result" data-option-array-index="1"&gt;Adult&lt;/li&gt;
           &lt;li class="active-result" data-option-array-index="2"&gt;Dislocated Worker&lt;/li&gt;
           &lt;li class="active-result" data-option-array-index="3"&gt;In-School Youth&lt;/li&gt;
           &lt;li class="active-result" data-option-array-index="4"&gt;Out-of-School Youth&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>changed the id from the select written html to the div that is created by chosen.js and the shading shows but not correctly.</p>
  
  <p>The new jquery code:</p>
  
  <pre><code>$('#program_chosen').addClass('error');
  </code></pre>
  
  <p>image of the shading using this code:
  <a href="https://i.stack.imgur.com/DYqG0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DYqG0.png" alt="enter image description here"></a></p>
  
  <p>oddly enough if I add the border shading directly to the <code>.chosen-container-single</code> &amp; <code>.chosen-single</code> in the css file then the border shows up as I would expect it to.  Unfortunately I only want this to occur when a user submits the form but does not have an option selected.  An image is below to show the current behavior:
  <a href="https://i.stack.imgur.com/mVzFj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mVzFj.png" alt="enter image description here"></a></p>
  
  <p>After realizing this I also found out that it works to apply addClass <code>.error</code> to <code>.chosen-container-single</code> &amp; <code>.chosen-single</code> through jquery and it works as expected.  It applies the desired shading to all of the selects.  I have tried <code>#program_chosen.chosen-container-single #program_chosen.chosen-single</code>but nothing happens...</p>
  
  <p>I feel like I am close but I am missing the final connection.  Any ideas are welcome!  Thanks in advance!</p>
  
  <p>-- Sadly I worked on this almost all day to find out that it was a simple issue.  Thanks to Steve for helping me clean up my code by utilizing addClass instead of writing the box-shading over and over again...newb mistake on my part.  The issue was the height of the div that chosen.js was creating was larger than the space it was contained within.  All I had to do was set the height within the chosen.css file and poof magically the box-shading fits perfectly.  This through off a few other things but they were simply fixed by adjusting some margins.  As silly as this is I hope it can help someone else avoid a headache in the future.</p>