html中的下拉框—select和input方式
阿新 • • 發佈:2020-07-22
1.使用<select>標籤
優點:可以初始化選中項
缺點:不能自定義option的樣式,自帶的樣式很醜
效果圖:
程式碼如下:
<select id="group" value="1"> <option value="1">Dimond</option> <option value="2">vertical</option> </select>
2.使用<input>標籤
為input標籤新增list屬性,下拉選項包含在<datalist>標籤中,list的值為<datalist>的id
優點:選項框可以手動輸入
缺點:沒有value,不適合鍵值對應關係的輸入。且當input中有值時選項框只顯示對應選項。
效果圖:
程式碼如下:
<input id="type" type="text" list="typelist" placeholder="請選擇"> <datalist id="typelist"> <option>Dimond</option> <option>vertical</option> </datalist>
3.使用<div>模擬select功能
優點:和select實現的功能完全相同,且可以自定義option樣式。
缺點:製作方式麻煩。