Bootstrap 3.0 theme for Chosen

chosen-bootstrap.scss

// Customized styles for select boxes using the Chosen jQuery plugin
// forked from Bootstrap-themed version at https://gist.github.com/koenpunt/6424137
// This one uses your variables from bootstrap-sass
// by thecristen, at https://gist.github.com/thecristen/e71ed5391fbdc6d63dc3 (no license go nuts)
// TODO: This only covers single select

select.form-control + .chosen-container.chosen-container-single .chosen-single {
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
  display: block;
  width: 100%;
  height: $input-height-base;
  padding: $padding-base-vertical $padding-base-horizontal;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $input-color;
  background-color: $input-bg;
  border: 1px solid $input-border;
  border-radius: $input-border-radius;
  background-image: none;

  div {
    top: $padding-base-vertical / $line-height-base;
  }

  abbr {
    top: $line-height-computed / 2;
  }
}

select.form-control + .chosen-container .chosen-drop {
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
  background-color: $input-bg;
  border: 1px solid $input-border;
  border-radius: $input-border-radius;
  background-clip: padding-box;
  margin: 2px 0 0;
}

select.form-control + .chosen-container .chosen-search input[type=text] {
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
  display: block;
  width: 100%;
  height: $input-height-base;
  padding: $padding-base-vertical $padding-base-horizontal;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $input-color;
  background-color: $input-bg;
  border: 1px solid $input-border;
  border-radius: $input-border-radius;
  background-image: none;
}

select.form-control + .chosen-container .chosen-results {
  margin: 2px 0 0;
  padding: 5px 0;
  font-size: $font-size-base;
  list-style: none;
  background-color: $input-bg;
  margin-bottom: 5px;
}

select.form-control + .chosen-container .chosen-results li,
select.form-control + .chosen-container .chosen-results li.active-result {
  display: block;
  padding: $padding-base-vertical $padding-base-horizontal;
  clear: both;
  line-height: $line-height-base;
  color: $input-color;
  background-image: none;
}

select.form-control + .chosen-container .chosen-results li:hover,
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted {
  color: $input-color;
  text-decoration: none;
  background-color: $input-border;
  background-image: none;
}


select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus {
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px transparentize($brand-primary, .4));
  border-color: $brand-primary;
  outline: 0;
}