Question

我有一个＆lt; select＆gt;选项以图像形式显示的元素（在CSS中指定）。＆lt; select＆gt;和＆lt;选项＆gt;元素按预期呈现，但设置默认选项似乎没有效果。选择中的第一个/默认选项呈现为空框： HTML：＆lt; select id =“select__avatar”value =“avatars-03.png”name =“select__avatar”＆gt; ＆lt; option value =“avatars-01.png”＆gt;＆lt; / option＆gt; ＆lt; option value =“avatars-02.png”＆gt;＆lt; / option＆gt; ＆lt; option value =“avatars-03.png”selected =“selected”＆gt;＆lt; / option＆gt; ＆lt; option value =“avatars-04.png”＆gt;＆lt; / option＆gt; ＆LT; /选择＆GT; CSS： #select__pick_stock_avatar option { 宽度：30px; 身高：34px; background-repeat：no-repeat; } #select__pick_stock_avatar选项[value =“avatars-01.png”] { 背景图像：URL（ “../图像/化身-01.png”）; } #select__pick_stock_avatar option [value =“avatars-02.png”] { 背景图像：URL（ “../图像/化身-02.png”）; } #select__pick_stock_avatar option [value =“avatars-03.png”] { 背景图像：URL（ “../图像/化身-03.png”）; } #select__pick_stock_avatar option [value =“avatars-04.png”] { 背景图像：URL（ “../图像/化身-04.png”）; } 默认选项呈现为空白。我希望能够设置默认选项服务器端，其值取决于登录用户特有的设置。有没有办法让默认显示指定的默认选项/图像？

Answer 1

选项标签不接受背景图片，你可以设置背景渐变色而不是图像..这是一个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;  
}

使用背景图像为<select>设置默认选项

2 个答案: