我有一份精選的性別清單。

代碼:

<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>

我想使用下拉列表中的圖像作為drop-down-icon.jpeg。

我想添加一個按鈕來代替下拉圖標。

怎么做呢？

在Firefox中，你可以在選項中添加背景圖片:

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select>

更好的是，你可以像那樣把HTML和CSS分開

超文本標記語言

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

在其他瀏覽器中，這樣做的唯一方式是使用一些JS小部件庫，例如jQuery UI，例如使用Selectable。

從jQuery UI 1.11開始，Selectmenu小部件可用，非常接近你想要的。

對于國家、語言或貨幣，您可以使用表情符號。

適用于幾乎所有支持表情符號的瀏覽器/操作系統(tǒng)。

select {
 height: 50px;
 line-height: 50px;
 font-size: 12pt;
}

<select name="countries">
    <option value="NL">