html - 我们如何才能在 HTML 中选择的选项标签中只显示图像？

Question

我正在尝试在选择标签的选项中显示图像/图标。所以任何人都可以提出出路。

我尝试使用类名(提供图像 url)，即

<option data-bind ="text:Caption, attr {'class': className}"></option>

但是，如果没有“text:Caption”，它就无法工作。那么，任何人都可以提出出路。

Answer 1

在 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

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 小部件库，例如 jQuery UI ，例如使用 Selectable .

来自 jQuery UI 1.11， Selectmenu 小部件可用，非常接近您想要的。