CODEWITHSUNDEEP
javascriptjqueryhtmlcssfirefox
CharanbabuKarnam
CharanbabuKarnam

Reputation: 356

Datalist arrow not coming in ie and firefox

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>

Upvotes: 18

Views: 21536

Answers (4)

Jishnu V S
Jishnu V S

Reputation: 8409

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.sstatic.net/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>

Upvotes: 22

PieterVK
PieterVK

Reputation: 1501

Well I did some searching and i immediately found this on w3schools. http://www.w3schools.com/tags/tag_datalist.asp This 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

Upvotes: -3

Dekel
Dekel

Reputation: 62536

The <datalist> element is not a <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.

The arrow that you see in chrome is something that is browser independent that only chrome has.

Just as a side note - for datetime-local - only in chrome you will see that placeholer:

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 autocomplete for example).

Upvotes: 0

Lucien Stals
Lucien Stals

Reputation: 237

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.

Upvotes: 1

Related Questions