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();