javascript 数据列表箭头没有进入 ie 和 firefox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31041925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datalist arrow not coming in ie and firefox
提问by CharanbabuKarnam
Hi I am using a datalist tag for a dropdown as in the fiddle. I am getting the arrow for dropdown in chrome only. and the arrow is not coming in ie and firefox. In firefox the search is lazy search ie; it is not based on the first letter
嗨，我正在使用 datalist 标记作为下拉列表，就像小提琴一样。我只在 chrome 中得到下拉箭头。并且箭头没有进入 ie 和 firefox。在 Firefox 中，搜索是惰性搜索，即；它不是基于第一个字母
The fiddle is:: https://jsfiddle.net/v7fg0zc8/pleas specify the styling if any to achieve this
小提琴是：：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>回答by Jishnu V S
Check with this. I've tried so many ways but not worked well. May be this is the only solution
检查这个。我尝试了很多方法，但效果不佳。可能这是唯一的解决方案
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>回答by Lucien Stals
Interesting. I tested this on my machine and got the same result :( The drop down arrow only appeared in Chrome, although in FF I could still select from the list but without a drop down arrow.
有趣的。我在我的机器上测试了这个并得到了相同的结果:( 下拉箭头只出现在 Chrome 中，虽然在 FF 中我仍然可以从列表中选择但没有下拉箭头。
What if you just used the SELECT tag instead?
如果您只使用 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>
I did some more digging on this and found this post... HTML Form: Select-Option vs Datalist-Option
我对此进行了更多挖掘，并找到了这篇文章... HTML 表单：Select-Option 与 Datalist-Option
It better explains the difference between datalist and select. That could also be why my suggestion of using SELECT instead might not be appropriate. But it could also explain the lack of the arrow. I don't see anywhere in the other discussions about the arrow being a guaranteed behaviour. The datalist may still function as an auto complete, but without the drop down arrow (although I just checked this again in IE11 and it doesn't even seem to do the autocomplete).
它更好地解释了 datalist 和 select 之间的区别。这也可能是我建议使用 SELECT 的建议可能不合适的原因。但这也可以解释缺少箭头的原因。我在其他讨论中没有看到关于箭头是有保证的行为的任何地方。数据列表可能仍然用作自动完成功能，但没有下拉箭头（尽管我刚刚在 IE11 中再次检查了它，它甚至似乎没有自动完成）。
Perhaps this can just get put down to how well different browsers implement this feature.
也许这可以归结为不同浏览器实现此功能的程度。
回答by Dekel
The <datalist>element is nota <select>replacement.
The general idea is to give you the ability to set a list of predefined values for other controls [1], however there is no specification for how to draw that list and whether or not to show an arrow.
该<datalist>元素是不是一个<select>替代品。
总体思路是让您能够为其他控件[1]设置预定义值列表，但是没有关于如何绘制该列表以及是否显示箭头的规范。
The arrow that you see in chrome is something that is browser independent that only chrome has.
您在 chrome 中看到的箭头与浏览器无关，只有 chrome 才有。
Just as a side note - for datetime-local- only in chrome you will see that placeholer:
就像旁注一样 - 因为datetime-local- 只有在 chrome 中你才会看到那个占位符：
mm/dd/yy --:--:--
<input type="datetime-local" />If you want to show the exact arrow in all browsers you will have to use some javascript code for that (you can use jquery ui's autocompletefor example).
如果要在所有浏览器中显示确切的箭头，则必须为此使用一些 javascript 代码（autocomplete例如，您可以使用 jquery ui ）。
回答by PieterVK
Well I did some searching and i immediately found this on w3schools. http://www.w3schools.com/tags/tag_datalist.aspThis page clearly states that it is meant to implement auto completion. Auto completion is a feature often found in IDE's with the purpose of providing possible values while you type. In other words Firefox and IE implement it the right way. As soon as you decide to type something in the textbox, it provides you with possible options and while you type, it filters the possible options. In this case Chrome implements it rather strange by making it a dropdown box. Auto completion is not supposed to work that way in the case where you would use a text input. You can use it for a dropdown box however when you use a select tag within your datalist as seen here https://www.w3.org/TR/html5/forms.html#the-datalist-element
好吧，我做了一些搜索，我立即在 w3schools 上找到了这个。 http://www.w3schools.com/tags/tag_datalist.asp这个页面明确指出它是为了实现自动完成。自动完成是 IDE 中常见的一项功能，目的是在您键入时提供可能的值。换句话说，Firefox 和 IE 以正确的方式实现了它。一旦您决定在文本框中键入内容，它就会为您提供可能的选项，并且在您键入时，它会过滤可能的选项。在这种情况下，Chrome 通过将其设置为下拉框来实现它相当奇怪。在您使用文本输入的情况下，自动完成不应该以这种方式工作。您可以将它用于下拉框，但是当您在数据列表中使用选择标签时，如下所示https://www.w3.org/TR/html5/forms.html#the-datalist-element
