moz-appearance似乎不起作用

Question

我的样式是我的select box，它在chrome和safari上工作得很好。

现在我的问题是在FF中我仍然可以看到带有我的选择框的下拉箭头。

我试图推荐this solutions和this solutions，但这对我没有帮助。

代码：

  <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;

有人有诀窍或解决方案吗？

提前多多感谢

Answer 1

不太确定你对决赛的期望。

你可以尝试使用带有负边距，浮点数和额外元素作为掩码的基本旧方法。伪元素可以用作添加图像或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;
} 

你可以看到只向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;
    } 
}