Question

您好，我正在使用数据列表标记作为小提琴中的下拉列表。我正在获取仅用于下拉列表的箭头。并且箭头没有进入ie和firefox。在firefox中，搜索是懒惰的搜索，即;它不是基于第一个字母

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

＆＃13;

  <!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>

＆＃13;

Answer 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>

Answer 2

有趣。我在我的机器上测试了这个并得到了相同的结果:( 下拉箭头仅出现在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的建议可能不合适的原因。但它也可以解释缺乏箭头。在其他讨论中，我没有看到任何关于箭头是保证行为的讨论。数据列表仍然可以作为自动完成功能，但没有下拉箭头（虽然我只是在IE11中再次检查它，它似乎甚至没有自动完成）。

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

Answer 3

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

您在Chrome中看到的箭头与浏览器无关，只有Chrome有。

仅作为旁注 - 对于<select> - 仅在Chrome中你会看到那个placeholer：

datetime-local

＆＃13;

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

＆＃13;

如果你想在所有浏览器中显示确切的箭头，你必须使用一些javascript代码（你可以使用jquery ui＆＃39; s autocomplete for example）。

Answer 4

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

Datalist箭头没有进入ie和firefox

4 个答案: