Here's some CSS to display a down arrow image instead of the default select tab in the various browsers. The text-indent/text-overflow trick will hide it in FireFox. But we then have to remove the excess padding using our browser select js class. Then Internet Explorer has a pseudo class for the select box down arrow indicator. We can use displa…

hide-select-down-arrow.css

div.woocommerce form.woocommerce-ordering select,
body.woocommerce-page  form.woocommerce-ordering select {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background: url(images/arrow-down.png) no-repeat right center #fff;
	height: 36px;
	line-height: 1;
	padding-right: 20px;
	text-indent: 0.01px;
	text-overflow: "";
}

.gecko div.woocommerce form.woocommerce-ordering select,
.gecko body.woocommerce-page  form.woocommerce-ordering select {
	padding-right: 0;
}

div.woocommerce form.woocommerce-ordering select::-ms-expand,
body.woocommerce-page  form.woocommerce-ordering select::-ms-expand {
	display: none;
}