How to remove the default arrow shape <select> in Firefox (Firefox version 30) and IE
Is there a way to hide the arrow of an element in Firefox and IE, I know this question has already been asked here and answered, but no longer works on FF30.
Here's an example of what I am 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 and IE.he -moz-appearance: neither will get rid of the dropdown icon.
+3
source to share
2 answers
You may try:
select::-ms-expand {
display: none;
}
for hiding the down arrow in IE and for more information .
and for firefox we can use this:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
see this fiddle : see link and link2
let me know if you still have arrow problems
thank
+1
source to share