为背景图片设置<select>的默认选项

我有一个<select>元素，其中的选项显示为图片（在CSS中指定）。 <select>和<option>元素按预期呈现，但设置默认选项似乎不起作用。为背景图片设置<select>的默认选项

中选择第一个/默认选项呈现为一个空框：

HTML：

<select id="select__avatar" value="avatars-03.png" name="select__avatar"> 
    <option value="avatars-01.png"></option> 
    <option value="avatars-02.png"></option> 
    <option value="avatars-03.png" selected="selected"></option> 
    <option value="avatars-04.png"></option> 
</select>

CSS：

#select__pick_stock_avatar option { 
    width: 30px; 
    height: 34px; 
    background-repeat: no-repeat; 
} 

#select__pick_stock_avatar option[value="avatars-01.png"] {  
    background-image:url("../images/avatars-01.png"); 
} 
#select__pick_stock_avatar option[value="avatars-02.png"] {  
    background-image:url("../images/avatars-02.png"); 
} 
#select__pick_stock_avatar option[value="avatars-03.png"] {  
    background-image:url("../images/avatars-03.png"); 
} 
#select__pick_stock_avatar option[value="avatars-04.png"] {  
    background-image:url("../images/avatars-04.png"); 
}

默认选项呈现为空白。我希望能够设置默认选项服务器端，其值取决于特定于登录用户的设置。有没有办法让默认显示指定的默认选项/图像？

来源

2016-01-01 Boa

您可以设置CSS来“#select__avatar”：

#select__avatar{ 
    background-image: url(avatars-03.png); 
    background-repeat: no-repeat; 
} 

#select__pick_stock_avatar option[value="avatars-01.png"] {  
    background-image:url("../images/avatars-01.png") !important; 
} 
#select__pick_stock_avatar option[value="avatars-02.png"] {  
    background-image:url("../images/avatars-02.png") !important; 
} 
#select__pick_stock_avatar option[value="avatars-03.png"] {  
    background-image:url("../images/avatars-03.png") !important; 
} 
#select__pick_stock_avatar option[value="avatars-04.png"] {  
    background-image:url("../images/avatars-04.png") !important; 
}

来源

2016-01-01 17:37:53

谢谢，但我不能使用这种方法，因为我希望能够指定默认选项（取决于特定的设置登录的用户）在Python代码那个基因评价HTML元素。我会在问题中澄清这一点。 – Boa

选项标签不接受一个背景图片，你可以风格的背景渐变色，但不是image..it是标准

一个html

例如

background-image:-moz-linear-gradient(rgb(55,105,129),rgb(101,201,145));

来源

2016-01-01 17:49:03 repzero

谢谢，repzero。那么，选择器中的选项的背景图像正在渲染，除了null/first选项之外，现在我已经更仔细地检查了这个行为，看起来单击一个元素并不会改变第一个元素的图像;所以它似乎不是简单地设置默认元素，我需要重新阐述这个问题... – Boa

你使用什么浏览器版本..我有这个相同的问题，并尝试了几种解决方案，证明是徒劳的... ...看到这个链接... http://stackoverflow.com/questions/5562149/adding-images-with-option-tag – repzero

我在Firefox 42上试用后发布了这个问题。刚刚检查出它在Opera和IE上，和它无法渲染图像，所以看起来你很反对这种方法。 – Boa

为背景图片设置<select>的默认选项

回答

相关问题