HtmlService - 在select元素中抑制Firefox箭头

Question

编辑：此问题已与投票重复的问题How to remove the arrow from a select element in Firefox不同。从一开始就在问题中提到了这个问题 - 在尝试获得每日近距离投票限制之前，请先阅读问题。

---

我正在使用Google Apps脚本的HtmlService来显示HTML表单，包括jQuery和javascript。使用Google Doc附加组件的推荐样式表，这就是Chrome中显示选择框的方式：

在Firefox中，这是同样的事情。注意额外叠加的箭头。

如何摆脱Firefox中的叠加层？

我已经尝试了How to remove the arrow from a select element in Firefox中描述的技术，但已接受且最高投票的答案已停止在更新版本的FF中工作，并且对我无效。其他涉及溢出选择并用溢出的div隐藏溢出的解决方案很有意思，但由于它们也消除了所需的“向上/向下”箭头，因此它们不适用于此应用程序。

HTML

<div class="block form-group">
  <label for="my-selection">Select an option:</label>
  <select class="width-100" id="my-selection">
    <option value="Option 1"></option>
    <option value="Option 2"></option>
    <option value="Option 3"></option>
  </select>
</div>

CSS

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
.width-100 {
  width: 100%;
}
select {
  height: 31px;
}
</style>

Answer 1

我在Firefox v37.0.1中尝试了您的代码，它看起来与Chrome和Safari完全相同（没有额外的箭头）。也许google更新了他们的css文件？

Answer 2

  

其他解决方案涉及溢出选择并用溢出的div隐藏溢出很有意思，但由于它们也消除了所需的“向上/向下”箭头，因此它们不适用于此应用程序。

您只需重新实施向上/向下箭头即可。我想你可以管理两个三角形。根据我的经验，这是解决这个问题的唯一可靠解决方案。

Answer 3

尝试，

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

您可以在上面使用。然而据报道，这个技巧在Firefox v30 - Firefox v35之间无法正常工作。

对于firefox v30明智，下面似乎根据消息来源工作。 您可以抛出javascript代理来查找浏览器源以相应地执行操作。 （window.navigator.userAgent）

.styled-select { 
  overflow: hidden; 
  width: 200px;
}

@-moz-document url-prefix(){
  .styled-select select { width: 110%; }
}

关注此Github链接以获取进一步参考。 https://gist.github.com/joaocunha/6273016