CODEWITHSUNDEEP
jquerycssjquery-chosen
Lance Shi
Lance Shi

Reputation: 1187

How to style jquery chosen select box

I am using jQuery chosen for my multi-select box. However, I do find the styles pre-defined in chosen.css file is kind of hard to overwrite, which totally getting rid of chosen.css might also not be a very good option.

Here is my fiddle: https://jsfiddle.net/k1Lr0342/

HTML:

<select class="chosen" multiple="true" style="height: 34px; width: 280px">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option selected="selected">Dojo Toolkit</option>
</select>

css: 

.chosen-choices {
    border-radius: 3px;
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
    border: none;
    height: 34px !important;
    cursor: text;
    margin-top: 12px;
    padding-left: 15px;
    border-bottom: 1px solid #ddd;
    width: 285px;
    text-indent: 0;
    margin-left: 30px;
  }

I tried to directly write the css for .chosen-choices ul. Some works like border-radius and box-shadow. But others: margin, height, padding, border, etc. get overwritten by chosen.css file. One option is to put !important for every setting which doesn't work. This will work for most stuffs but still not the height. Any thoughts?

Upvotes: 13

Views: 36330

Answers (6)

Chris March
Chris March

Reputation: 750

For those who are interested this is some sass I worked out that will style the chosen select box, the biggest issue is it uses background as opposed to background-colour which is why it ignores your css colours`.chosen-drop border-bottom-left-radius: 10px border-bottom-right-radius: 10px

&.chosen-results li.result-selected display: none !important

.chosen-select option display: none

.chosen-container width: 100% !important

.chosen-choices padding: 5px !important background: $inputBackground !important

li.search-choice color: $text !important background: $alternateBackground !important border-radius: 10px !important

span
  padding: 10px`

Upvotes: 0

Post Impatica
Post Impatica

Reputation: 16373

I had to use:

$(".chzn-results li").css("width", "100%");

not sure if it's because I have a really old version or what.

Upvotes: 0

Bryan
Bryan

Reputation: 1005

Little late but I thought I'd answer since I ran into this. Since the chosen items you see are based on the select menu it hides, you have to find the element in the div immediately following it (created by chosen) and style it. You can do this with Jquery assuming you know it's value.

$('.your-select-menu').next().find('.search-choice').each(function() {
  if ($(this).text() === someValue) {
    $(this).css("border-color", "#00b300");
  }
})

Results in this
enter image description here

Upvotes: 0

Shoeb Mirza
Shoeb Mirza

Reputation: 918

Try using jQuery, here is the working JSFIDDLE

$(".chosen-choices li").css("background","red");

Upvotes: 2

blurfx
blurfx

Reputation: 1360

CSS will accept style that uses more specified selector.

.chosen-container-multi .chosen-choices {
    /*blah blah*/
}

.chosen-choices {
    /* less specificity, this style might not work  */
}

Working fiddle

Upvotes: 10

Joshua H
Joshua H

Reputation: 774

If you look at .chosen-choices in chosen.css, you will find the height is auto!important. Delete (or comment) those !important and that should be fine.

You can use your browser's element inspector to check the applied css. I personally use Chrome developer tools every time. Save me alot of hassle

Upvotes: -1

Related Questions