Using Datalist Elements With jQuery UI Themes

While you can't necessarily style the actual drop-down rendered by the browser you you implement the datalist element, you can at least style the input itself. For example, if you want to use the datalist element in your jQuery UI application, you might apply some theme framework CSS classes to the input element. The trick is, finding something that looks acceptable across browsers.

Here's an example implementation of the datalist element on an input that has jQuery UI theme styles applied to it.

<label class="ui-widget">Make a choice:</label>
<input list="browsers" 
       class="ui-widget ui-widget-content"/>
<datalist id="browsers">
    <option value="" />
    <option value="Firefox"/>
    <option value="Internet Explorer"/>
    <option value="Opera"/>
    <option value="Safari"/>
    <option value="Chrome"/>
</datalist>

And here's what the resulting combination of browser styling and jQuery UI theme styling looks like.

This on Chrome using the Cuppertino theme. As you can see from the markup, the datalist route to implementing autocomplete input elements is nice and simple, and you can make it work within your jQuery UI application. If you need more control over the widget, however, the jQuery UI autocomplete widget is a good choice.