syamnath
8/19/2016 - 6:48 AM

custom select box jQuery plugin

custom select box jQuery plugin

/*Custom style select plugin*/
.selectWrapper {
  position: relative;
  span.dropdown_button {
    background: $white;
    display: block;
    position: absolute;
    right: 0px;
    top: 0;
    width: 41px;
    border: 1px solid #ccc;
    border-radius: 0 4px 4px 0; 
    border-left: 0;
    pointer-events: none;
    &:after {
      background: #fff none repeat scroll 0 0;
      color: #00a9e0;
      content: "\f107";
      display: block;
      font-family: FontAwesome;
      pointer-events: none;
      position: absolute;
      right: 18px;
      top: 12px;
    }
  }
  select {
    background: $white;
    border: 1px solid #ccc;
  }
}
/*Custom select dropdown plugin
*************************************/
$.fn.customSelect = function () {
  if($(this).is("select")) {
    /*Check if the selector is selectbox*/
    $(this).wrap("<div class='selectWrapper'></div>")
    /*Get the height of the selcct box*/
    $(this).parent(".selectWrapper").append("<span class='dropdown_button'></span>");
    var selectBoxHeight = $(this).outerHeight() - 2;
    /*The height of the selector is implemented to the :after element*/ 
    $(this).parent(".selectWrapper").find(".dropdown_button").height(selectBoxHeight + "px")
  } else {
    //console.log("Please use a select box as a sellector");
  }
}
$(".paragraph--type--support-us-form-block .support-form-wrapper select").customSelect();