jQuery chosen plugin demo

by kaintz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<div>
  <select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
</div>

CSS

html .chosen-container.chosen-container-single {
  width: 210px !important;
  font-size: 17px;
  vertical-align: top;
}


html .chosen-container.chosen-container-single a {
  border-radius: 5px;
  border: 1px solid #dfe4ec;
  height: 35px;
  padding-left: 10px;
  box-shadow: none;
  background: white;

}

html .chosen-container.chosen-container-single a span {
  line-height: 35px;
}

html .chosen-container-single .chosen-search input[type="text"] {
  border: 1px solid #d5dfe1;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  margin: 1px 0;
  padding: 4px 20px 4px 4px;
  width: 100%;
}

html .chosen-container .chosen-drop {
  border: 1px solid #d5dfe1;
}

html .chosen-container .chosen-results li {
  line-height: 1.42857143;
}

html .chosen-container-single .chosen-single div b {
  background-size: contain;
  width: 18px;
  background-repeat: no-repeat;
  background-position-y: 8px;
}

html .chosen-container-single .chosen-single div {
  width: 30px;
}

html .chosen-container-single .chosen-single span {
  margin-right: 30px;
}

html .chosen-container.chosen-container-multi {
  width: 100% !important;
  font-size: 17px;
}

html .chosen-container-multi ul.chosen-choices {
  border-radius: 5px;
  border: 1px solid #dfe4ec;
  min-height: 35px;
  padding-left: 0px;
  box-shadow: none;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
}

html...

JavaScript

$('.chosen-select').chosen();

let chosenContainerMore = function(chosenChoises) {
  let choiseSelectnHeight = chosenChoises.height();
  console.log(choiseSelectnHeight);
  if (choiseSelectnHeight > 35) {
    chosenChoises.addClass("more");
  } else {
    chosenChoises.removeClass("more")
  }

}
$('body').change(function() {
  let tagChosen = $(".chosen-choices");
  chosenContainerMore(tagChosen);
});