input with datalist

<input /> could associate <datalist /> through attribute list to let input has dropdown menu just like <select />.

HTML structure

<div class="input-set"> <input name="item-title" type="text" placeholder="請輸入商品名稱" autocomplete="off" list="item-title-options" /> <label class="input-set__label"> <span class="input-set__label__span">商品名稱</span> </label> <em class="input-set__em"></em> </div> <datalist id="item-title-options"> <option value="我推的孩子">我推的孩子</option> <option value="戀上換裝娃娃 - 喜多川海夢">戀上換裝娃娃 - 喜多川海夢</option> <option value="萊莎的鍊金工房 ~常闇女王與秘密藏身處~">萊莎的鍊金工房 ~常闇女王與秘密藏身處~</option> <option value="Vivy -Fluorite Eye's Song">Vivy -Fluorite Eye's Song</option> <option value="鏈鋸人">鏈鋸人</option> </datalist>

Style Customization

The following style could clear default dropdown icon.

<style> [list]::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; } [list]::-webkit-list-button { opacity: 0; pointer-events: none; } </style>