Styling a jQuery Chosen Select Box: Tips and Tricks

I am currently utilizing jQuery chosen plugin for my multi-select box. However, I am facing some challenges with customizing the styles defined in the chosen.css file as they are proving to be quite stubborn to override. Removing the entire chosen.css file is not an ideal solution either.

For reference, here is the link to my fiddle: https://jsfiddle.net/k1Lr0342/

Snippet of the 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 snippet: 

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

In attempting to customize the styles for .chosen-choices ul, certain properties like margin, height, padding, border, etc. are being overridden by the existing chosen.css file. One workaround I've tried is using the !important declaration for each specific property, however, this has not proven effective with adjusting the height. Any suggestions or insights on how to tackle this issue?

jquerycssjquery-chosen

Answer №1

CSS prioritizes styles with a higher level of specificity.

.primary-navigation ul li {
    /*blah blah*/
}

li {
    /* less specific, this style may not take effect */
}

Interactive example

Answer №2

If you want to change the background color of elements with the class "chosen-choices", you can achieve this easily with jQuery. Check out the demonstration on JSFIDDLE

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

Answer №3

Sorry for the delay, but I wanted to share some insight on this topic. The selected items you see are actually based on the hidden select menu, so you need to target the element in the div that immediately follows it (created by chosen) and apply styles accordingly. Using Jquery can be helpful if you're familiar with its functionality.

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

This approach will lead to a result similar to
https://i.sstatic.net/365WW.png

Answer №4

For this task, I found that I needed to employ the following code:

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

I'm unsure whether this was necessary due to my outdated version or some other reason.

Answer №5

If you're looking for some customized sass code to style your select box, here's a snippet I put together. One thing to note is that it uses background instead of background-color, which may cause your CSS colors to be overlooked.

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

Answer №6

When examining the .chosen-choices section in chosen.css, note that the height is set to auto!important. Removing or commenting out those instances of !important should resolve any issues.

I recommend utilizing your browser's element inspector to review the implemented CSS. Personally, I rely on Chrome developer tools for this task as it saves me a significant amount of time and effort.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

iOS emphasizes special characters by printing them in bold

Some parts of the website I am managing are showing German umlauts in bold (as seen in the screenshot). The font style being used is font-family: Source Sans Pro, Arial, sans-serif; with font-weight: 300. This font is sourced from Google Fonts. When I cha ...

ioscssfonts

jQuery body background changer/utilizer

I am currently developing a website that requires the functionality to switch between background images with the ability for users to navigate through them using back and forth arrows. Each background image should have a unique dynamic description associa ...

phpjqueryhtmlcss

Angular detects when a user scrolls on a webpage

I have developed a straightforward navigation system using Angular. The main controller is responsible for generating the menu. <nav class="{{active}}" ng-click= ""> <a href="#a" class="home" ng-click= "active='home'">Home< ...

javascriptjqueryangularjs

CSS or Coding? Learn how to display items side by side instead of on top of each other

Hey there! I manage a music website that is currently in beta. I'm running into an issue with the way the music results are appearing in the bottom player - they're all stacked on top of each other instead of being listed side by side. I've ...

htmlcss

Verify the level of opacity in the image

I'm working on a website that allows users to upload PNG images and save them. However, before they can save the image, I need to check if it contains transparency. Is there a way to determine if an image is not 24-bit using JavaScript? <img id= ...

javascriptjqueryhtmltransparency

jQuery encountering an issue with parsing JSON data (error message displayed)

Upon reviewing similar questions, it seems that most issues arise from either invalid JSON or incorrect headers on the XMLHttpRequest. My case, however, does not seem to fall into either of those categories. I have a reliable JSON server at my disposal. Y ...

javascriptjqueryjson

Make sure to employ Bootstrap's justify-content-between and stack-to-horizontal col correctly

I am currently working on a responsive form that contains 1 label, 1 input field, and 5 buttons. Both the buttons and the input field are located under col-8. The positioning I aim for the buttons is as follows: They should start below and align with ...

htmlcssbootstrap-4responsive-designfrontend

Hover over with your mouse to open and close the dropdown menu in React JS

Just starting out with React JS and encountering a small issue. I'm trying to make the menu disappear when the mouse leaves that area, so I used onMouseOut and onMouseLeave to close it. However, I noticed that having these options in place prevents th ...

javascripthtmlcssreactjsmaterial-ui

Adapting the column width to display or hide content with CSS styling

I have a row with 2 columns. The left column contains my main content and the right column is a chatroom. I would like users to be able to minimize and open the chatroom, which I already know how to do. However, when the chatroom is open, I want the left ...

javascripthtmlcss

The jQuery code functions smoothly on computers, but experiences delays when running on an iPhone

I was working on my website and trying to add a div that sticks to the top of the browser when it scrolls out of view. I found a script that works well on desktop, but when testing it on iPhone, there is a slight delay before the div pops back up in the ri ...

javascriptjqueryioscssiphone

What is the purpose of the bold line down the left side of every HTML calendar?

Welcome to a calendar layout designed with flexbox: Check it out here Do you notice the thicker lines below the heading rows and want to remove them? Here is how you can modify the HTML & CSS code: #calendars-container { text-align: center; font-f ...

htmlcssflexboxoutline

Is it possible to load ASP.NET MVC3 EditorTemplates using Ajax without repeating jQuery?

Utilizing EditorTemplates for elements such as DateTime, Colors, and more has been a key aspect of my form design. These templates are often loaded dynamically through Ajax as partial views. Instead of cluttering each editor template with several jQuery i ...

jqueryajaxasp.net-mvcmvc-editor-templates

Why is my jQuery animation running so sluggishly everywhere? Is there a way to improve its performance and make

I attempted to replicate the slider effect seen on this website: Below is the animation code: $('.tagLink').click(function () { $('html').css('overflow', 'hidden'); $('#tagBoxOverlay&ap ...

javascriptjqueryanimationcss

How can Rails correctly render a custom JSON format for dates?

What is the best way to format a custom JSON object containing dates in Rails so that it can be easily converted into a Date object using jQuery? I am currently facing issues where the date string I am trying to convert, such as "2011-12-14 00:59:59 +01:00 ...

jqueryruby-on-railsjsondate

The dropdown menu is being filled with 'undefined' values when using AJAX as the data source in Typeahead

I've been trying to implement typeahead functionality, but I can't seem to find a solution on Stack Overflow that works for me. I am using an ajax source to retrieve JSON data for my products, however the typeahead feature is returning all matche ...

javascriptjqueryajaxjsontypeahead

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail

Designing HTML columns to adapt to different screen resolutions

Looking for a clever jQuery or CSS trick to dynamically adjust the number of columns in a website layout based on the size of the viewport. For instance, an iPhone display would have 1 column, while an 800x600 screen would have 2, and a 1024x768 screen wou ...

jqueryhtmlcss

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

stopping a float-left div from being pushed down by a table

I am facing an issue with two float:left divs that are supposed to stack left-to-right. One div is a fixed width left nav, while the other should span the remaining width of the browser. The problem arises when there is a table in the second div with multi ...

css

Verifying the presence of an image via its URL may not be functional across all browsers

Hey folks, I'm working on a project that involves displaying an image along with other fields in a loop where the image source changes with each iteration. I also need to check if the image exists and set a default source if it doesn't. The code ...

javascriptjquery