如何在谷歌Chrome浏览器的选择框中显示图像

我想在谷歌浏览器的选择下拉框中显示图像。只在谷歌浏览器中不显示图像，但所有浏览器都显示图像。如何在谷歌Chrome浏览器的选择框中显示图像

谷歌chrome图像的样子...... enter image description here

所有浏览器中显示图像的样子...... enter image description here

所以我想做出同样的选择框在所有浏览器。

我的代码..

.selectbox_bg { 
    background: url("images/contact_texbox_bg.png") no-repeat scroll 0 0 transparent !important; 
    border: medium none; 
    color: #5D5C5C !important; 
    font-size: 15px; 
    height: 33px; 
    line-height: 33px; 
    padding: 6px 10px; 
    width: 255px; 
}

请帮助我。

谢谢。

来源

2012-11-07 Nishant Patel

你可以粘贴你的代码 – Sowmya

尝试添加：-webkit-appearance：none; –

它在Chrome中的一个bug，没有选择框的透明度颜色，并且您必须将其设置为选项，但我认为您可以使用css3轻松地重新生成该效果（Chrome支持） – Ayyash

试试这个，把你的背景图像background:url和粘贴代码的休息和调整所有参数相应。

background:url(selectbox.png) no-repeat !important; 
-webkit-appearance: none; 
-moz-appearance: none; 
border: medium none; 
color: #5D5C5C !important; 
font-size: 15px; 
height: 33px; 
line-height: 33px; 
padding: 6px 10px; 
width: 255px;

来源

2012-11-07 08:02:37 Toretto

我已经添加了你的CSS，但使用下拉按钮后没有显示在选择框中，我认为这是问题“”-webkit-appearance：none; -moz-appearance：none;“” –

@NishantPatel我认为在使用图像时不能显示下拉按钮。您必须使用下拉按钮创建图像，如您在问题中所示。信息看到这篇文章http://stackoverflow.com/questions/1439163/how-can-i-style-an-html-select-box-to-omit-drop-down-arrow-for-print – Toretto

[链接] （http://example.com） –

您可以用CSS

select{ 
    background-color: #9BD300; 
    border-radius:4px; 
    border:1px #99CC00 solid; 
    padding:4px; 
    width:150px 
}

DEMO

做，或尝试这个

.selectbox_bg { 
    background: url("images/contact_texbox_bg.png"); 
    background-position: 0 0;   
    background-repeat: no-repeat; 
    background-attachment:scroll; 
    background-color:transparent; 
    border: medium none; 
    color: #5D5C5C !important; 
    font-size: 15px; 
    height: 33px; 
    line-height: 33px; 
    padding: 6px 10px; 
    width: 255px; 
}

来源

2012-11-07 07:29:22 Sowmya

我想将背景图像...像背景：url（“images/contact_texbox_bg.png”）无重复滚动0 0 transparent！important; –

检查更新后的答案。如果你可以发布你的图片链接会更容易 – Sowmya

如何在谷歌Chrome浏览器的选择框中显示图像

回答

相关问题