Question

我有以下选择元素：

<select id="P0_LANGUAGE">
    <option value="en">
        English
    </option>
    <option selected="selected" value="hu">
        Hungarian
    </option>
</select>

我可以按如下方式自定义选择选项：

select option[value="en"] {
   background-image: url('eng-flag.png');
   background-repeat: no-repeat;
   padding-left: 25px;
   margin-bottom: 2px; 
}

select option[value="hu"] {
   background-image: url('hun-flag.png');
   background-repeat: no-repeat;
   padding-left: 25px;
   margin-bottom: 2px; 
}

这很好，但我还想自定义主选择元素，因此它显示所选选项的适当背景。但我怎么能实现这个目标呢？

Answer 1

尝试这样

 background: #0088cc url(http://icons.iconarchive.com/icons/hopstarter/flag-borderless/24/China-icon.png) no-repeat 90% center;

参见This Fork https://jsfiddle.net/3pg81hjm/

＆＃34;动态＆＃34;选择元素的背景

1 个答案: