为具有背景图像的<select>设置默认选项

Question

我有一个<select>元素，其中的选项显示为图像(在CSS中指定)。<select>和<option>元素按预期呈现，但设置默认选项似乎没有效果。

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

​

​

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");  
}

默认选项呈现为空白。我希望能够设置默认选项服务器端，其值取决于登录用户的特定设置。是否有一种方法可以获得默认值以显示指定的默认选项/图像？

Answer 1

选项标签不接受背景图片，您可以使用背景渐变颜色，但image..it不是html标准。

示例

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

Answer 2

您可以将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;  
}