Native input (select) with search functionality

There are many select replacements out there, but even with limited options to style native form controls, we can still achieve custom-made results. See my post about styling select, radio, and checkbox if you want to know more.

<form>
  <label for="input">Label:</label>
  <input list="input-list" id="input" name="input">

  <datalist id="input-list">
    <option value="Option 1">
    <option value="Option 2">
    <option value="Option 3">
    <option value="Option 4">
    <option value="Option 5">
  </datalist>

  <button type="reset">Reset</button>
</form>

Live demo

Further reading

Share

Thanks for reading. If you liked it, consider sharing it with friends via:

Let's be in touch!

Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.

I want to be up to date via email!

No spam ever (I don't like spam, I don't send spam). You can unsubscribe at any time. Privacy Policy

Don't you want to subscribe via e-mail?

See other ways to keep in touch.

Comments

If you want to comment, write a post on social media and @mention me. You can also write to me directly on the contact page.