Form Element Styles

cross-browser-select-input-styles

//Set global height, border, box shadow and radius for input field and selects
//Remove webkit appearance
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select, .form-select:not(.chosen-container), .chosen-container .chosen-single, textarea{
  -webkit-appearance:none;
  /*replace these scss styles with css if needed*/
  @include box-shadow(none);
  @include border-radius(0px);
  border-color:#ccc;
  height:35px;
}

//Set custom background image for selects
//Image should be no wider than 20px so IE9 and IE8 arrow sits over your image
select, .form-select:not(.chosen-container), .chosen-container .chosen-single{
  padding-right:20px;
  background:#fff url(/sites/all/themes/custom/vrweb_foundation/images/select-bg.gif) center right no-repeat;
  padding-left:3px;
  
  /*nix the right padding for versions of IE that generate the arrow*/
  padding-right:0px\9;
}

//Firefox display mode to remove the arrow, adjust padding as needed
@-moz-document url-prefix() { 
  select, .form-select{
    -moz-appearance: none;
    padding-top: 10px;
    text-indent: 0.01px;
    text-overflow: "";
  }
}
//Remove default chosen arrow
.chosen-container-single .chosen-single div b{background:none;}
.chosen-container-active.chosen-with-drop .chosen-single{
  background:#fff url(/sites/all/themes/custom/vrweb_foundation/images/select-bg.gif) center right no-repeat;

}
.chosen-container.chosen-with-drop .chosen-drop .chosen-results{
  li.active-result.highlighted{
    background:$secondary-color;
  }
}
.chosen-container-single .chosen-single span{
  padding-top:4px;
}
//Remove arrow in IE11 and IE10
select.form-select::-ms-expand, select.form-select+.chosen-container-single>.chosen-single::-ms-expand {
  display: none;
}