We have a jQuery-UI widget that turns a rendered <select>
into a new autocompleting <input>
that uses the <select>
's <option>
s as its backing data. The <select>
remains on the page, but is hidden from view, and it's value is kept in sync with that of the autocomplete. Now I'd like to make the autocomplete a combobox, complete with down-arrow. Some ideas:
<input class='combobox' /><span class='combobox-button'>▼</span>
.combobox { border: 1px solid; }
.combobox-button { position: ???; top: ???; left: ???; }
<input class='combobox' /><span class='combobox-button'>▼</span>
.combobox, .combobox-button { border: 1px solid; }
.combobox { border-right: none; }
.combobox-button { border-left: none; }
<input class='combobox' /><button class='combobox-button'>▼</button>
/* same CSS as previous */
<input class='combobox' /><input type="button" class='combobox-button' value="▼" />
/* same CSS as previous */
I think I like the
<input>
with an<input type="button">
next to it, sharing a border best.