Html moz的外观似乎不起作用

我有自己的

选择框

，它在chrome和safari上运行良好

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

我已经试着转介，但没有帮到我

代码：

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

有人有解决这个问题的诀窍吗

---

提前多谢了

我不太确定你们在期末考试中的期望是什么

您可以尝试使用基本的老式方法，使用负边距、浮点和一个额外的元素作为掩码。伪元素可以用作掩码来添加图像或图标

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

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

您可以看到仅向mozilla提供此服务：

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

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

---

@janaspage更新了我的问题