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>


Run code

I just want to remove the default arrow icon in firefox and IE.he -moz-appearance: neither will get rid of the dropdown icon.


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




I updated my version of moz now using version 37.0.2 firefox solved this error on newer version



All Articles