CODEWITHSUNDEEP
htmlcss
Hunter Mitchell
Hunter Mitchell

Reputation: 7293

Adding a small image in a list?

I have made a dropdown menu. I need a 25px x 25px image to the left of the dropdown list's text? Every time i try, the image will not appear? Why? and how do i fix it? I have tried and tried, but the image will never appear. http://jsfiddle.net/Hunter4854/M4Ef2/1/

Upvotes: 0

Views: 92

Answers (3)

Ryan B
Ryan B

Reputation: 3392

Unless I am missing someting, I am not sure why people are suggesting stuff with <li>. If you want the 25x25 image to appear in the drop down, use:

CSS

select#test_select option[value="graphic designer"] {
 background: url("myimage.png") left top no-repeat;
 padding-left: 50px;  
} // continue with every value

Upvotes: 0

Israel Unterman
Israel Unterman

Reputation: 13510

Try:

.custom-select ul {
  ...
  background: url("myimage.png") left top no-repeat;
  padding-left: 50px;
}

Upvotes: 1

Musa
Musa

Reputation: 97672

I don't think you can put an image tag in a option tag, the best thing would be to set a background image and padding on the option tag.
If you look at the script you'll see that it rebuilds the .custom-select ul that's why you lose any <img> in the markup, check out this fiddle where I comment out that code.

$('#test_select option').each(function(i){
    html.push('<li rel="'+$(this).val() +'">'+$(this).text()+'</li>');
});

$('.custom-select ul').html(html.join(''))

Upvotes: 1

Related Questions