Change Chosen.js CSS with JQuery

Question

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:

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:

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)"});
}

tried adding Chosen js .trigger but still no luck:

$('#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");

Rendered code from Chrome Inspect:

<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>

changed the id from the select written html to the div that is created by chosen.js and the shading shows but not correctly.

The new jquery code:

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

image of the shading using this code:

oddly enough if I add the border shading directly to the .chosen-container-single & .chosen-single 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:

After realizing this I also found out that it works to apply addClass .error to .chosen-container-single & .chosen-single through jquery and it works as expected. It applies the desired shading to all of the selects. I have tried #program_chosen.chosen-container-single #program_chosen.chosen-singlebut nothing happens...

I feel like I am close but I am missing the final connection. Any ideas are welcome! Thanks in advance!

-- 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.

Scott · Accepted Answer · 2016-03-19 01:29:31Z

1

I'd recommend using a class to control your error state. Try this instead:

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

Then add this CSS:

#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);
}

Of course, you will need to remove this class when the error is cleared, so run this at the appropriate time:

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

answered Mar 19, 2016 at 1:29

Scott

3,7712 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Craig Howell Over a year ago

I tried this but it is not working on the chosen.js field. It is working for the text inputs though. I agree this cleans up the code and simplifies it. Doesn't resolve the original question unfortunately thought...

Scott Over a year ago

If you provide the rest of the HTML, I could provide the necessary CSS to stylize the field you mention. Based just on what you say it seems you might have duplicate IDs or malformed HTML or some other issue.

Scott Over a year ago

Try inspecting the rendered dropdown in Chrome. Right click, inspect. See what it's class name is, and add $('.CLASSNAME').addClass('error');

Craig Howell Over a year ago

I followed your second comment and was able to find that chosen.js is creating a div element after the select element after rendering with an id="program_chosen". I changed $('#program').addClass('error'); with $('#program_chosen').addClass('error'); and the box shadow now shows around the top correctly but the left and right sides extend past the bottom of the visible select. Almost there!!!

Collectives™ on Stack Overflow

Change Chosen.js CSS with JQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related