Basic Custom Select Plugin With jQuery - cSelect

cSelect is a really small jQuery plugin to create custom select elements that preserves the native select methods and events.

How to use it:

1. Load the stylesheet jquery.cSelect.css for the custom styles of your select elements.

<link href="jquery.cSelect.css" rel="stylesheet">

2. Load both jQuery JavaScript library the JavaScript file jquery.cSelect.js at the end of the html document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.cSelect.min.js"></script>

3. Call the function cSelect() on the native HTML select element and done.

$("select").cSelect();

4. Override the default styles to create your own styles.

[data-type=cSelect] {
  width:260px;
  height:40px;
  position:relative;
  display:inline-block;
  background:#fff url(demo/arrow.png) no-repeat 95% center;
  line-height:40px;
  border:1px solid #b3b3b3;
  border-radius:4px;
  color:#000;
  box-sizing:border-box
}

[data-type=cSelect] > select {
  width:100%;
  height:100%;
  min-height:100%;
  position:absolute;
  top:0;
  right:0;
  opacity:0;
  zoom:1;
  z-index:1;
  cursor:pointer
}

[data-type=cSelect] > div {
  padding:0 45px 0 10px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden
}

---

This awesome jQuery plugin is developed by melbon. For more Advanced Usages, please check the demo page or visit the official website.