CODEWITHSUNDEEP
htmlcss
user3117841
user3117841

Reputation:

How to insert images in list or select

I want to add image to input type=select.

But how to do so I don't know. I know how to simply add text to it like :

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

Upvotes: 3

Views: 207

Answers (3)

Vivek S
Vivek S

Reputation: 2051

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

Upvotes: 1

Gourav
Gourav

Reputation: 1774

 <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); 
 }

Or

 <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); }

Upvotes: 2

Java Curious ღ
Java Curious ღ

Reputation: 3692

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>

But first one is good to implement.

Upvotes: 6

Related Questions