datalist-css

datalist-css: HTML5 datalist CSS styling

This JavaScript module allows you to style HTML5 <datalist> and child <option> elements using standard CSS. Load demo.html to view the demonstration page.

HTML5 <datalist> elements cannot be styled. To achieve it, this 1.5Kb script overrides the browser's default behavior; the <datalist> effectively becomes a <div>. It's little different to using a JavaScript-based autocomplete control since all display and input handling must be managed manually.

This script was primarily written for demonstration purposes and it's probably best avoided!...

• You lose the benefits and accessibility of a standard lightweight HTML5 <datalist>.
• There are better JavaScript autocomplete options available.

Usage

Load the script anywhere in your HTML page as an ES6 module:

<script type="module" src="./dist/datalist-css.min.js"></script>

or using the CDN:

<script src="https://cdn.jsdelivr.net/npm/datalist-css/dist/datalist-css.min.js"></script>

Create a standard text <input> immediately followed by a <datalist> containing one or more <option> elements, e.g.

<label for="browser">browser:</label>

<input list="browserdata" id="browser" name="browser" size="50" autocomplete="off" />

<datalist id="browserdata">
  <option>Brave</option>
  <option>Chrome</option>
  <option>Edge</option>
  <option>Firefox</option>
  <option>Internet Explorer</option>
  <option>Opera</option>
  <option>Safari</option>
  <option>Vivaldi</option>
  <option>other</option>
</datalist>

Note:

• The input's list attribute must reference the id of the <datalist>.
• Use autocomplete="off" to ensure the input does not show previously values entered by the user.
• Only the <option>value</option> format can be used (<option value="value" /> is an empty element which cannot be styled).

Add CSS to style all <datalist> and <option> elements, e.g.

datalist {
  position: absolute;
  max-height: 20em;
  border: 0 none;
  overflow-x: hidden;
  overflow-y: auto;
}

datalist option {
  font-size: 0.8em;
  padding: 0.3em 1em;
  background-color: #ccc;
  cursor: pointer;
}

/* option active styles */
datalist option:hover, datalist option:focus {
  color: #fff;
  background-color: #036;
  outline: 0 none;
}

Building

The minified script is built using Rollup.js and Terser. Install globally:

npm install -g rollup rollup-plugin-terser

If not done already, set NODE_PATH to the npm root folder so global modules can be used within any project directory, e.g.

export NODE_PATH=$(npm root --quiet -g)

Build using:

npm run build