HtmlService - 在选择元素中抑制 Firefox 箭头答案

【问题标题】：HtmlService - Suppress Firefox arrow in select elementHtmlService - 在选择元素中抑制 Firefox 箭头
【发布时间】：2014-08-08 02:28:28
【问题描述】：

编辑：这个问题已经不同于被投票重复的问题How to remove the arrow from a select element in Firefox。该问题从一开始就在问题中被引用 - 在尝试获得每日接近票数限制之前，请阅读该问题。

我正在使用 Google Apps Script 的 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>

【问题讨论】：

@leo & other voters... 在您投票结束之前，请考虑一下： 1. 我已经引用了 that question with 23 answers，指出它们不适用于新版本的 Firefox，并解释了为什么它们不适用。 2. Google 环境影响解决方案 - “下”箭头不受我控制。
你说得对，我太快了。我的坏
我在 Firefox v37.0.1 中尝试了您的代码，它看起来与 Chrome 和 Safari 完全相同（没有额外的箭头）。也许谷歌更新了他们的 css 文件？
我在 FF 28.0 中使用了您的代码。只有当我缩小默认缩放级别时，我才会得到额外的箭头。
这有帮助吗？ gist.github.com/joaocunha/6273016 来自谷歌搜索：google.com/…

标签： javascript jquery css html google-apps-script

【解决方案1】：

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

【讨论】：

感谢克里斯蒂安，提醒您“一直存在”的问题值得再看一次。我不确定更改是在 Firefox 还是 Google 的 css 中 - 无论哪种方式，问题都消失了，我的插件不需要更改代码！
是的，我知道那种感觉。祝你的插件好运！
这个答案太简单了！

【解决方案2】：

涉及溢出选择和使用封闭 div 隐藏溢出的其他解决方案很有趣，但由于它们也消除了所需的“向上/向下”箭头，因此对于此应用程序来说是不可接受的。

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

【讨论】：

【解决方案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

【讨论】：