Question

此html仅在chrome中使所选值不可见，其他浏览器中select的背景为彩色，仅在chrome中为白色

<HTML>
<head>
    <title>
        title
    </title>    
    <link id="siteThemeLink" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/excite-bike/jquery-ui.css"
        rel="stylesheet" type="text/css" />          
</head>

<body>
<select class='ui-state-error'>
    <option>hi</option>
    <option>hi</option>
    <option>hi</option>
</select>
</body>
</HTML>

有人知道修复吗？

Answer 1

Google Chrome不支持选择中的背景图片，这就是样式表中的规则中断的原因。

要修复它，您需要单独指定背景颜色和背景图像，以便不支持背景图像的浏览器不会忽略整个规则，但至少会选择它们支持的规则：

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
  background-color: #E69700;
  background-image: url(images/ui-bg_diagonals-thick_20_e69700_40x40.png) 50% 50% repeat;
}

或者，您可以在style属性中设置背景颜色，但这不像其他解决方案那样干净：

<select class='ui-state-error' style='background-color: #E69700;'>

Answer 2

我知道这有点旧了，但我在寻找相同的anwser时遇到了它，这是一种解决这个问题的Css方法

@media screen and（-webkit-min-device-pixel-ratio：0）{//仅限目标-webkit浏览器

select {
    background-image: none; /* remove the value that chrome dose not use */
    background-color: #333; /* set the value it does */
    border-radius: 4px;     /* make it look kinda like the background image */
    border: 1px solid #888;
}

}

希望它有所帮助

Answer 3

首先，您必须检测浏览器以解决问题：

var userAgent = navigator.userAgent.toLowerCase();
$.browser = {
    version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
    chrome: /chrome/.test( userAgent ),
    safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
    opera: /opera/.test( userAgent ),
    msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
    mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

然后将字体颜色更改为黑色：

$.each($.browser, function(i, val) {
if($.browser.chrome){
$(o).css({'color':'black'});
}
});

Answer 4

使用jQuery，你可以做到这一点

$('#selectbox').css({
    'background': 'blue'
});

检查http://jsfiddle.net/B2NFE/2/

处的工作示例

在Chrome中查看时，选择框中的白色背景

4 个答案:

检查http://jsfiddle.net/B2NFE/2/