IE和Firefox浏览器中datalist箭头无法显示

Question

IE和Firefox浏览器中datalist箭头无法显示

17

嗨，我正在使用datalist标签作为下拉列表，就像在fiddle中一样。我只在Chrome浏览器中看到了下拉箭头，而在IE和Firefox浏览器中没有出现箭头。在Firefox浏览器中，搜索是惰性搜索，而在IE中，它不是基于第一个字母进行搜索。

Fiddle链接： 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>

- CharanbabuKarnam

6

这只是不同浏览器实现功能的因素之一。Chrome的开发人员决定在其中放置一个下拉箭头；而FF和IE的开发人员则决定不这样做。其他HTML5输入类型在各个浏览器之间也有不同的工作方式。不要纠结于每个浏览器中的外观完全相同。 - Simba

@deviantfan，你有没有检查答案？ - Dekel

尝试使用这个 Tocken input.js。 - Jishnu V S

4个回答

1

有趣。我在我的计算机上测试了这个，得到了相同的结果:( 下拉箭头只出现在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表单：Select-Option vs Datalist-Option 它更好地解释了datalist和select之间的区别。这也可能是为什么我建议使用SELECT可能不合适的原因。但这也可以解释缺少箭头的原因。我在其他讨论中没有看到任何关于箭头是保证行为的地方。datalist仍然可以作为自动完成功能，但没有下拉箭头（尽管我刚在IE11中再次检查了一下，似乎甚至都没有自动完成）。

也许这只能归咎于不同浏览器实现此功能的好坏。

- Lucien Stals

3

如果我使用select标签，我就无法输入文字 @Lucien - CharanbabuKarnam

是的 @charanbabu。我刚意识到我的建议答案有问题，所以我已经编辑了我的回答。 - Lucien Stals

0

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

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

顺便提一下-对于datetime-local - 只有在Chrome中才会看到该占位符：

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

<input type="datetime-local" />

如果您想在所有浏览器中显示精确的箭头，则必须使用一些JavaScript代码（例如，您可以使用jQuery UI的{{link1：autocomplete}}）。

- Dekel

（正如我在其他地方已经说过的）我知道许多事情没有被指定并且依赖于浏览器。但那不是OP所问的问题，也不是我为之提供悬赏的问题。这里的问题是如何在所有主要浏览器中强制它具有箭头。（是的，我看到了你的答案，没有必要在评论中询问） - deviantfan

-3

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

- PieterVK

作为普通用户的评论：W3Schools与W3C无关，并且在许多情况下被认为提供错误信息。真正的W3并未说明datalist用于自动完成，或者它是否应该有一个箭头（https://www.w3.org/TR/html5/）（这是实际问题，浏览器可以按照他们想要的方式实现）。 - deviantfan

作为悬赏者，我知道我在之前的评论中写的内容。然而，问题在于如何强制它有一个箭头。引用错误的来源并不是答案。 - deviantfan

我进行了编辑。此外，W3明确指出，当您想要下拉框时，需要使用select标记。正如W3所说：在更复杂的情况下，datalist元素可以被赋予内容，以便为不支持datalist的下级客户端显示。在这种情况下，option元素被提供在datalist元素内部的select元素中。因此，我所说的仍然是正确的。 - PieterVK

1

W3也明确指出，当您想要一个下拉框时，需要使用select标签。这在您的引用中并没有提到，引用完全是关于旧浏览器而没有任何datalist支持的，并且以下代码示例（仅为示例，不是必需的）。您是否忘记了已经有一个没有select的下拉框，并且它完全符合标准？唯一的问题是箭头。 - deviantfan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jishnu V S · Accepted Answer

看看这个。我尝试了很多方法，但效果不好。也许这是唯一的解决方案。

input::-webkit-calendar-picker-indicator {
  display: none;/* remove default arrow */
}
.myarrow:after {
    content: url(https://istack.dev59.com/i9WFO.webp);
    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>