Is there a way to hide the arrow of a element in Firefox and IE, I know this question is already asked here and answered but doesn't work on FF30 anymore.
Here's an example of what I'm doing:
select {
border: 0 !important;
-webkit-appearance: none;
-moz-appearance: none;
background: url(../images/select-arrow.png) no-repeat 95% 50% #ffffff;
background-size: 12%;
overflow: hidden;
border: 1px solid #b4b4b4;
padding: 5px;
font-size: 16px;
text-indent: 0.01px;
text-overflow: "";
}
<select class="col-xm-8 col-sm-8 col-xs-8 pull-right">
<option selected="selected" icon="">Sort Topics</i>
</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
I just want to remove the default arrow icon in firefox & IE.he -moz-appearance: none doesn't get rid of the dropdown icon.