已解決430363個問題，去搜搜看，總會有你想問的

如何在選擇列表中添加圖像？

首頁猿問如何在選擇列表中添加圖像？

如何在選擇列表中添加圖像？

Html/CSS

守候你守候我 2019-06-06 15:59:56

如何在選擇列表中添加圖像？我有一份性別選擇列表。代碼：<select><option>male</option><option>female</option><option>others</option></select>我想使用下拉列表中的圖像作為下拉列表。我想添加一個按鈕代替下拉圖標。怎么做？

查看完整描述

3 回答

MM們

TA貢獻1886條經驗獲得超2個贊

在……里面火狐您只需將背景圖像添加到選項中：

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

HTML

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

CSS

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小部件庫，例如jQueryUI，例如使用可選.

來自jQueryUI 1.11，選擇菜單小部件是可用的，非常接近您想要的。

反對回復 2019-06-06

肥皂起泡泡

TA貢獻1829條經驗獲得超6個贊

我的解決方案是使用FentAwome，然后添加庫圖像作為文本！您只需使用Unicodes，就可以在這里找到它們：用于Unicodes的參考文件

下面是一個狀態過濾器示例：

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'><option value=''>&#xf039; &nbsp; All States</option>
<option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option><option value='paused' style='color:orange;'>
&#xf04c; &nbsp; Paused</option><option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option></select>

注意字體系列：Arial，FontAwome；需要按樣式分配，以便選擇，就像在示例中給出的一樣！

反對回復 2019-06-06

3 回答
0 關注
771 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

如何在選擇列表中添加圖像？

如何在選擇列表中添加圖像？

3 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在選擇列表中添加圖像？

如何在選擇列表中添加圖像？

3 回答

相關問題推薦

添加回答

如何在選擇列表中添加圖像？