Themed Input Elements That Use Datalist

Applying jQuery UI themes to inputs that use the datalist element for autocomplete capabilities.

by Adam Boduch

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css">
<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>

CSS

body {
    font-size: 0.8em;
}

input {
    padding: 0.1em;
}