Some of the posts at Ex Ratione only exist because of the nagging chance that I'll someday be annoyed at myself for not having recorded the results of a recent hour or two of work - anywhere other than the codebase I was working on at the time, that is. It's most likely the case that I'll never have to do exactly the same task again, but you never know. Certainly memory is a fallible thing, and I've often enough been put in the spot of kicking myself for having to figure out a small task from scratch, again, for the third time.

Thus today's topic is a dark style for the Chosen jQuery plugin for prettifying and enhancing the functionality of select elements. I put this together as a part of volunteer work for a non-profit that needed a temporary landing page for a new initiative, and it's quite possible that I'll never need a dark Chosen select again. But you never know. Default out of the box Chosen is light, white, and blue-tinged, which isn't great for those mortuary occasions involving sites that dress in black. It looks like this:

Here is an alternative version in black and gray shades, intended for use against a page background color of #121212:

This darker version of the Chosen select uses the following CSS to override the default colors and gradients:

/* dark color overrides */

#dark-select .chzn-container .chzn-results li {
  color: #999999;
}
#dark-select .chzn-container .chzn-drop, .chzn-container-single .chzn-single {
  background-color: #252525;
  color: #999999;
}
/* Some IE 7-9 fun with this next one - filter likes to override background */
#dark-select .chzn-container-single .chzn-single {
  background-color: #000000;
  background-image: none;
  background: #000000 none top left no-repeat;
  filter: none;
  border: none;
  display: block;
  height: 30px;
}
#dark-select .chzn-container .chzn-drop {
  border: 1px solid #121212;
}
#dark-select .chzn-container-single .chzn-single div {
  background-image: -webkit-gradient(linear, left bottom, left top,
    color-stop(0, #333333), color-stop(0.6, #121212));
  background-image: -webkit-linear-gradient(center bottom, #333333 0%, #121212 60%);
  background-image: -moz-linear-gradient(center bottom, #333333 0%, #121212 60%);
  background-image: -o-linear-gradient(bottom, #333333 0%, #121212 60%);
  background-image: -ms-linear-gradient(top, #333333 0%,#121212 60%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333',
    endColorstr='#121212',GradientType=0 );
  background-image: linear-gradient(top, #333333 0%,#121212 60%);
  border-left: 1px solid #252525;
}
#dark-select .chzn-container-active .chzn-single-with-drop {
  box-shadow: none;
}
#dark-select .chzn-container .chzn-results .highlighted {
  background: #333333;
  color: #eeeeee;
}
#dark-select .chzn-container .chzn-results .no-results {
  background: #333;
}
#dark-select .chzn-container .chzn-results li em {
  background: none;
}

/* dark sprite overrides */

#dark-select .chzn-container-single .chzn-single abbr {
  background: url('https://www.exratione.com/assets/chosen-sprite-dark.png') right top no-repeat;
}
#dark-select .chzn-container-single .chzn-single div b {
  background: url('https://www.exratione.com/assets/chosen-sprite-dark.png') no-repeat 0 1px;
}
#dark-select .chzn-container-single .chzn-search input,
#dark-select .chzn-rtl .chzn-search input {
  background: #333 url('https://www.exratione.com/assets/chosen-sprite-dark.png') no-repeat 100% -22px;
  color: #999999;
  border: 1px solid #555555;
}
#dark-select .chzn-container-multi .chzn-choices .search-choice .search-choice-close {
  background: url('https://www.exratione.com/assets/chosen-sprite-dark.png') right top no-repeat;
}

This uses a different sprite image from the default Chosen sprite to better blend with the dark backgrounds in the select:

The one remaining issue is the scrollbar for the display of options in large selects. The selector for that is ".chzn-container .chzn-results", and the default max-height is 190px, which means that you'll see a scrollbar after about the seventh or eighth item. Since that is an ordinary browser scrollbar, it will be usually be very light in color in comparison to the rest of the dark Chosen select. Dealing with darkening the scrollbar (outside of WebKit browsers, which benefit from a nice set of non-standard CSS scrollbar properties) will most likely be a matter of hooking in one of the many Javascript custom scrollbar solutions - and for the sake of the length of this post, I'll leave that last item as an exercise for the reader. If all of your selects are only five or six options long, then you'll have no need of it, or equally you could just be lazy and increase the max-height value for the options display. Either of those paths will work for medium sized selects.