html - 莫兹外观似乎无法正常工作

我的风格我的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;

有人对此有技巧或解决方案吗？

提前谢谢

最佳答案

不太确定最终的期望。

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

关于html - 莫兹外观似乎无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24969237/