无法在html选项标签上添加图像

Question

我正在尝试在html选项标签上使用图片 我试过这段代码：

<select class="lang_menu">
     <option value="ka">ქართული</option>
     <option value="ru">русский</option>
     <option value="en">English</option>
</select>

和CSS代码：

select .lang_menu option {
   background-repeat:no-repeat;
   background-position:bottom left;
   padding-left:30px;}
select .lang_menu option[value="ka"] {
   background-image:url(../image/geo.png);
}
select .lang_menu option[value="ru"] {
   background-image:url(../image/rus.png);
}
select .lang_menu option[value="en"] {
   background-image:url(../image/eng.png);
}

但没有发生任何事。 我的组合框必须是这样的：

我的图片尺寸为16px X 11px

我不想使用任何javascript。

Answer 1

如果没有jQuery，这是不可能的，如果你可以在firefox中实现背景图像，你无法在chrome和任何其他浏览器上实现它，因为它们根本不支持它。

请参阅此link，并查看最后一个示例，了解您的确切需求。

Answer 2

试试这个。希望这对你有所帮助。 （未经测试）

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */ 
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}