在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小部件,它非常接近您想要的。
您在2015年有任何W3C有效的解决方案吗?是否没有重新实现选择框?
2017年呢?还是没有解决办法?
@IvanKuckir-Pffff。W3C仍在“讨论”为什么应该这样做以及为什么不应该这样做的原因,并且在对该主题进行了研究之后,委员会将讨论实现此目的的潜在优缺点。完成后,将进行有关向后兼容性的现场研究。然后,他们将对色盲人群进行研究。提出建议后,将对其他元素(例如复选框)的潜在副作用进行研究。毕竟,他们将进行一项研究,以决定是否需要进行所有这些研究。
Firefox不再支持上述方法。
大约2020年,我们仍处于中世纪