moz-appearance is not working it seems

Question

i have style my select box and its working fine on chrome and safari.

now my problem is in FF i can still see the dropdown arrow with my select box.

i have tried to refer this solutions and this solutions but it didn't help me.

Code :

  <select placeholder="Search" name="search_cat" class="search_select">
     <option value="">Everything</option>
     <option value="resource">Resources</option>
     <option value="734">Blog Posts</option>
     <option value="8">Pictures</option>
   </select>

css :

 -webkit-appearance: none;
 -moz-appearance: none;
  appearance: none;
  background: url("Search-bar-Arrow.png") no-repeat scroll 70px center #80B83B;
  border: none;
  color: #FFFFFF;
  height: 27px;
  overflow: hidden;
  padding: 4px 0; 
  vertical-align: top;
  text-indent: 0.01px;
  text-overflow: "";
  width: 91px;

do anyone have trick or solution for this?

Thanks a lot in advance

Answer 1

Not too sure of what you expect in final.

you could try to use a basic oldish method with negative margin, float and an extra element as a mask .A pseudo element can be used as a mask to add an image or icone. DEMO

div {
  display:inline-block;
  border:1px outset;
  overflow:hidden;/*where no pseudo is used;*/
}
div.pseudo:before {
  content:'⇓';
  text-align:center;
  float:right;
  width:1.1em;
  height:1.3em;
  background:tomato;
  position:relative;
}
select {
  margin-right:-1.25em;
  margin-left:-1px;
  border:none;
} 

You could see to serve this only to mozilla : DEMO2

@-moz-document url-prefix() {
    div {
      display:inline-block;
      border:1px outset;
      overflow:hidden;/*where no pseudo is used;*/
    }
    div.pseudo:before {
      content:'⇓';
      text-align:center;
      float:right;
      width:1.1em;
      height:1.3em;
      background:tomato;
      position:relative;
    }
    select {
      margin-right:-1.25em;
      margin-left:-1px;
      border:none;
    } 
}