Question

我想将图片添加到输入类型=选择。

但怎么办我不知道。我知道如何简单地添加文字，如：

<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

Answer 1

HTML：

<select id="listdata">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

CSS：

select#listdata option[value="1"]   { background-image:url(1.png);   }
select#listdata option[value="2"] { background-image:url(2.png); }
select#listdata option[value="3"] { background-image:url(3.png); }

OR

<select>
  <option style="background-image:url(1.png);">1</option>
  <option style="background-image:url(2.png);">2</option>
  <option style="background-image:url(3.png);">3</option>
</select>

但第一个很好实现。

Answer 2

 <select>
   <option class ="demo" value="a">a</option>
   <option class ="demo" value="b">b</option>
   <option class ="demo" value="c">c</option>
 </select>

CSS

 .demo
 {
     background-image:url(image.png); 
 }

或者

 <select id="another_demo">
   <option>a</option>
   <option>b</option>
   <option>c</option>
 </select>

的CSS

 select#another_demo option[value="a"]   { background-image:url(a.png);   }
 select#another_demo option[value="b"] { background-image:url(b.png); }
 select#another_demo option[value="c"] { background-image:url(c.png); }

Answer 3

<select>
  <option style="background:url(option1.png);background-size:w h">option1</option>
  <option style="background:url(option2.png);background-size:w h">option2</option>
  <option style="background:url(option3.png);background-size:w h">option3</option>
</select>

如何在列表中插入图像或选择

3 个答案: