Menu
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
The fiddle is:: https://jsfiddle.net/v7fg0zc8/ pleas specify the styling if any to achieve this
<!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>
665
Unfortunately, Internet Explorer and Chrome are the only browsers to support datalists on range inputs at this time.
Alternatives to <datalist> If you need type-entry autocomplete, the most widely supported solution is Javascript. JQueryUI's autocomplete module is probably the most commonly used option.
The datalist tag is introduced in HTML5. The <datalist> tag should be used with an <input< element that contains a "list" attribute. The value of "list" attribute is linked with the datalist id.
Generally, both the tags are used for choosing an option from the given list. But the main difference between both is that in the <datalist> tag the user can enter its own input and add that as an option with the help of the <input> element whereas the <select> tag doesn't provide this feature.
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>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.
What if you just used the SELECT tag instead?
<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
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).
Perhaps this can just get put down to how well different browsers implement this feature.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
