数据列表箭头未进入 ie 和 firefox答案

【问题标题】：Datalist arrow not coming in ie and firefox数据列表箭头未进入 ie 和 firefox
【发布时间】：2015-09-11 13:30:25
【问题描述】：

您好，我正在使用 datalist 标签作为下拉列表，就像小提琴中一样。我只在 chrome 中获得下拉箭头。并且箭头没有进入ie和firefox。在 Firefox 中，搜索是惰性搜索，即；它不是基于第一个字母

小提琴是:: https://jsfiddle.net/v7fg0zc8/ 请指定样式（如果有）以实现此目的

  <!DOCTYPE html>
  <html>
  <body>
      <input list="browsers" name="browser">
      <datalist id="browsers">
      <option value="Internet Explorer"></option>
          <option value="Firefox"></option>
          <option value="Chrome"></option>
          <option value="Opera"></option>
          <option value="Safari"></option>
      </datalist>
  </body>
  </html>

【问题讨论】：

这只是不同浏览器如何实现该功能的一个因素。 Chrome 开发人员决定在其中放一个下拉箭头； FF 和 IE 开发人员决定不这样做。其他 HTML5 输入类型在各种浏览器之间的工作方式也不同。不要因为必须在每个浏览器中看起来完全相同而挂断电话。
@deviantfan，你检查答案了吗？
试试这个Tocken input.js

标签： javascript jquery html css firefox

【解决方案1】：

检查一下。我尝试了很多方法，但效果不佳。可能这是唯一的解决方案

input::-webkit-calendar-picker-indicator {
  display: none;/* remove default arrow */
}
.myarrow:after {
    content: url(https://i.stack.imgur.com/i9WFO.png);
    margin-left: -20px; 
    padding: .1em;
    pointer-events:none;
}

<span class="myarrow"><input list="browsers" name="browser" id="#show-suggestions"></span>
<datalist id="browsers">
  <option value="Internet Explorer"></option>
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>

【讨论】：

最后，一个真正尝试回答的人......虽然并不完美（例如，需要在 firefox 中单击两次），但这是迄今为止最好的答案......我想，你会得到明天赏金
怎么样？ Mr: Charan babu 最后一次见到是今年 8 月 7 日，那他怎么能接受这个答案呢？
抱歉有疑问。我听说有人接受答案是获得赏金的唯一途径
每个答案都有一个按钮来奖励赏金。我还没有点击，但它应该可以工作，
好的，感谢您的回复。

【解决方案2】：

嗯，我做了一些搜索，我立即在 w3schools 上找到了这个。 http://www.w3schools.com/tags/tag_datalist.asp 该页面明确指出它旨在实现自动完成。自动完成是 IDE 中常见的一项功能，目的是在您键入时提供可能的值。换句话说，Firefox 和 IE 以正确的方式实现它。一旦您决定在文本框中输入内容，它就会为您提供可能的选项，并且在您输入时，它会过滤可能的选项。在这种情况下，Chrome 通过将其设置为下拉框来实现它相当奇怪。在您使用文本输入的情况下，自动完成不应该以这种方式工作。您可以将它用于下拉框，但是当您在数据列表中使用选择标签时，如下所示https://www.w3.org/TR/html5/forms.html#the-datalist-element

【讨论】：

作为普通用户发表评论：W3Schools 与 W3C 无关，已知很多情况下有错误信息。真正的 W3 并没有说明 datalist 是用于自动完成，或者它是否应该有一个箭头 (w3.org/TR/html5)（这是实际问题，浏览器可以按照他们想要的方式实现它）
...并以赏金提供者的身份发表评论：我知道我之前评论中写的内容。尽管如此，这里的问题是如何强制它有一个箭头。引用错误的来源，这不是一个答案。
我编辑了它。 W3 还明确指出，当您想要一个下拉框时，您需要使用一个选择标签正如 W3 所说：在更复杂的情况下，可以为 datalist 元素提供要为不支持的下级客户端显示的内容支持数据列表。在这种情况下，选项元素在 datalist 元素内的 select 元素内提供。所以我说的还是对的。
Also W3 clearly states that you need to use a select tag when you want a dropdown box 在哪里？它不在您的报价中，这完全是关于没有任何数据列表支持的旧浏览器，以及以下代码示例（这只是一个示例，不是必需的）。您是否忘记了已经有一个没有选择的下拉框，并且标准完全允许？唯一的问题是箭头。

【解决方案3】：

<datalist> 元素不是替换<select>。
一般的想法是让您能够为其他控件[1] 设置预定义值列表，但是没有关于如何绘制该列表以及是否显示箭头的规范。

您在 chrome 中看到的箭头是独立于浏览器的，只有 chrome 才有。

作为旁注 - 对于datetime-local - 只有在 chrome 中你会看到那个占位符：

mm/dd/yy --:--:--

&lt;input type="datetime-local" /&gt;

如果您想在所有浏览器中显示确切的箭头，您将不得不为此使用一些 javascript 代码（您可以使用 jquery ui 的autocomplete for example）。

【讨论】：

（正如我在其他地方已经说过的）我知道很多东西都没有指定并且依赖于浏览器。但这不是 OP 提出的问题，我给予了赏金。这里的问题是如何强制它在所有主流浏览器中都有一个箭头。（是的，我确实看到了你的答案，没有必要在 cmets 中问）

【解决方案4】：

有趣。我在我的机器上测试了这个并得到了相同的结果:( 下拉箭头只出现在 Chrome 中，虽然在 FF 中我仍然可以从列表中选择但没有下拉箭头。

如果您只使用 SELECT 标记会怎样？

<select>
    <option value="Internet Explorer" >Internet Explorer</option>
    <option value="Firefox" >Firefox</option>
    <option value="Chrome" >Chrome</option>
    <option value="Opera" >Opera</option>
    <option value="Safari" >Safari</option>
</select>

我对此进行了更多挖掘并找到了这篇文章...HTML Form: Select-Option vs Datalist-Option

它更好地解释了 datalist 和 select 之间的区别。这也可能是我使用 SELECT 的建议可能不合适的原因。但这也可以解释箭头的缺失。在其他讨论中，我没有看到任何关于箭头是有保证的行为的地方。 datalist 可能仍然可以作为自动完成功能，但没有下拉箭头（尽管我刚刚在 IE11 中再次检查了它，它甚至似乎都没有自动完成）。

也许这可以归结为不同的浏览器实现此功能的程度。

【讨论】：

如果我使用正确的选择标签@Lucien，我将无法输入
是的@charanbabu。我刚刚意识到我建议的答案有问题，所以我编辑了我的答案。