我知道如何使用CSS background-image属性在HTML下拉表单元素中的选项旁边显示图片.
但是,图像不会显示在所选元素上.有没有办法做到这一点(最好只使用CSS)?
编辑:
以下是列表元素的工作代码示例.但是,当关闭下拉列表时,您只能看到所选元素的文本,而不显示图像:
<select name="form[location]">
<option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;">Andorra</option>
<option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;">United Arab Emirates</option>
<option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;">Afghanistan</option>
<option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;">Antigua and Barbuda</option>
<option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;">Anguilla</option>
<option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;">Albania</option>
<option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;">Armenia</option>
<option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;">Netherlands Antilles</option>
<option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;">Angola</option>
<option value="ar" style="background: url(img/flags/ar.gif) no-repeat; …Run Code Online (Sandbox Code Playgroud)