html - moz-appearance 似乎不起作用

Question

我为我的选择框设置了样式，它在 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>

样式:

 -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

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

您可以尝试使用带有负边距、 float 和额外元素作为 mask 的基本旧方法。伪元素可以用作添加图像或图标的 mask 。 <强> 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;
    } 
}