CSS外观属性 - JavaScript半工作，一半没有

Question

目标是通过使用JavaScript设置外观属性，使<select>列表的下拉箭头消失。 它：

1. 适用于Chrome
2. 不适用于Firefox
3. 对于Firefox，可以通过在样式部分中设置外观属性来使下拉箭头消失。 Whiskey Tango Foxtrot：）

感谢您提供任何帮助。

要查看问题，

• 在Chrome中运行该页面。下拉箭头不会出现。好，     此页面上的Chrome浏览器下方的JavaScript行完成了它的工作

• 在Firefox中运行该页面。下拉菜单出现了。不好的     Firefox的可比较JavaScript系列在此页面下方     不做其工作

• 取消注释CSS上的行并在Firefox中运行该页面。下拉列表将消失。

＆＃13;
＆＃13;
//The next line works correctly for Chrome, it makes the drop down arrow disappear    
//document.getElementById("mySelect").style.webkitAppearance = "none";

//The next line does NOT work for Firefox, the drop down arrow STILL appears
document.getElementById("mySelect").style.mozAppearance = "none";
＆＃13;
select {
  /*-moz-appearance: none; */
}
＆＃13;
<select id="mySelect">
  <option>red</option>
  <option>green</option>
</select>
＆＃13;
＆＃13;
＆＃13;

因此，对于Firefox，为什么在JavaSript中设置属性不起作用？