Select Field CSS Styling

Isn’t it frustrating when your site’s styling is almost perfect then the select field is, umm,  well, looks so default?

Here’s a css code to add on your css file.

select {
  -moz-appearance: none; 
  /* Removes Default Firefox style */
  background: url('../../images/dropdown-arrow.png') no-repeat; 
  /* Adds arrow as a background image */
  background-position: right; /* Position of the arrow */
  text-indent: 0.01px; 
  /* Removes default arrow from Mozilla Firefox */
  text-overflow: ""; 
  /* Removes default arrow from Mozilla Firefox */
  -webkit-appearance: none;
}
select::-ms-expand {
  display: none;
}