-webkit-appearance: none; firefox equivalent?

Answer 1

Here is the code for Firefox, Chrome, Safari, & IE. ( IE 10 and up )

Just add a small down arrow png for your select and its all set. My arrow is 30x30 but set it to your specs.

.yourClass select{
  overflow: none;
  background-color: #ffffff;
  -webkit-appearance: none;
  background-image: url(../images/icons/downArrow.png);
  background-repeat: no-repeat;
  background-position: right;
  cursor: pointer;
}

/* fall back for ie10+  */
.yourClass select::-ms-expand {
    display: none;
}