<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>