Problem with styling an select option tag, dropdown items with icon
I have below code and i have two problems:
- The icons only display on Firefox, I want some cross-browser thing
- Selected item has no icon, but when we expand the list all menus contains icon
** HTML
<select name="im_type" id="imtype">开发者_Go百科
<option value="Yahoo">Yahoo</option>
<option value="MSN">MSN</option>
<option value="GTalk">GTalk</option>
<option value="ICQ">ICQ</option>
<option value="AOL">AOL</option>
<option value="Skype">Skype</option>
</select>
** CSS
select#imtype option {
padding: 2px 0 2px 25px;
}
select#imtype option[value="Yahoo"] {
background: url('../images/yahoo.png') no-repeat 0 0;
}
select#imtype option[value="MSN"] {
background: url('../images/msn.png') no-repeat 0 0;
}
select#imtype option[value="GTalk"] {
background: url('../images/gtalk.png') no-repeat 0 0;
}
select#imtype option[value="ICQ"] {
background: url('../images/icq.png') no-repeat 0 0;
}
select#imtype option[value="AOL"] {
background: url('../images/aol.png') no-repeat 0 0;
}
select#imtype option[value="Skype"] {
background: url('../images/skype.png') no-repeat 0 0;
}
If you have any idea, please share with me, Thank you
Try using this jquery plugin:
http://www.marghoobsuleman.com/mywork/jcomponents/jquery-image-dropdown/index.html
精彩评论