HTML5 datalist tag is not populating in Safari

HTML5 datalist workaround for Safari and/or older browsers

Update, Jun 2022

Safari (untested by me) now supports the datalist tag—see this answer below. However, Firefox has some issues, as outlined on caniuse.

Update, Jan 2017

Both iOS or desktop Safari still do not support datalist, and there's no sign so far of this changing. So this is a hack making it appear to get around the issue. Chris Coyier also had a go at a datalist polyfill back in 2011. Let's hope Safari implements the existing W3C Recommendation in future.

Original post:

You can use a select element inside the datalist, and duplicate the option tag values as readable text in these. For example:

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <style>
    input[list="languages"] {
      width: 12em;
      border: none;
      background: #eee;
    }
    select {
      width: 12em;
      margin: 0;
      margin-left: -12.75em;
    }
  </style>
</head>
<body>

Choose: <input type="text" list="languages">
<label for="languages">
  <datalist id="languages">
    <select>
      <option value="JavaScript">JavaScript</option>
      <option value="Haskell">Haskell</option>
      <option value="Ruby">Ruby</option>
      <option value="Go">Go</option>
      <option value="Python">Python</option>
      <option value="etc">etc</option>
    </select>
  </datalist>
</label>
</body>
</html>

Supporting browsers will just display the datalist, Safari and older browsers will show the option tags' innerHTML. The input tag has a default border, which in Safari looks bad behind the select element, but with a little styling as shown in this example, you can get around Safari's lack of support and keep the same functional appearance. No need for Javascript and/or polyfills.


Datalist elements are not supported in Safari. http://caniuse.com/#feat=datalist

Tags:

Javascript

Html

Css

Safari

Recent Posts