[英]How to display an image in the options of select box in CHROME?
<select>
<option>image1 text</option>
<option>image2 text</option>
<option>image3 text</option>
<option>image4 text</option>
</select>
How to display an image in the option tag? 如何在选项标签中显示图像?
This is not possible with HTML and CSS only, at least not in Chrome. 仅HTML和CSS不可能做到这一点,至少在Chrome浏览器中则不可能。
But you could try some Javascript magic, eg this 但你可以尝试一些JavaScript的魔法,比如这个
Edit: It is possible in Firefox with CSS' property background-image
, but it doesn't seem to work in chrome. 编辑:可以在Firefox中使用CSS的background-image
属性,但是在chrome中似乎不起作用。
You can use this code.It is working. 您可以使用此代码。 Please put your images on div. 请把您的图片放在div上。
HTML Code: HTML代码:
<select id="selected">
<option value="0">Select</option>
<option value="a">Images text1</option>
<option value="b">Images text2</option>
<option value="c">Images text3</option>
<option value="d">Images text4</option>
</select>
<div id="colors">
<div id="a">
<img src="http://www.acura.com/images/HomepageSlideshow/home_bg_mdx.jpg" height="200px" width="400px"/>
</div>
<div id="b">
<img src="http://www.acura.com/images/HomepageSlideshow/home_bg_tlx.jpg" height="200px" width="400px" />
</div>
<div id="c">
<img src="http://www.acura.com/images/HomepageSlideshow/home_bg_rlx.jpg" height="200px" width="400px"/>
</div>
<div id="d">
<img src="http://www.acura.com/images/HomepageSlideshow/home_bg_ilx.jpg" height="200px" width="400px"/>
</div>
</div>
CSS Code: CSS代码:
#a
{
background-color: red;
height: 200px;
width: 400px;
}
#b
{
background-color: green;
height: 200px;
width: 400px;
}
#c
{
background-color: blue;
height: 200px;
width: 400px;
}
#d
{
background-color: darkviolet;
height: 200px;
width: 400px;
}
#colors div
{
display: none;
}
JQuery Code: jQuery代码:
$(document).ready(function(){
$("#selected").change(function(){
$('#colors div').hide();
$('#'+$(this).val()).show();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.