Fatal编程技术网
  • jquery/
  • Jquery 在Chrome中查看时，选择框中的白色背景

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

jquery html css select google-chrome

Jquery 在Chrome中查看时，选择框中的白色背景,jquery,html,css,select,google-chrome,Jquery,Html,Css,Select,Google Chrome,仅在chrome中的html使选定值不可见，在其他浏览器中选择的背景是彩色的，只有在chrome中是白色的 <HTML> <head> <title> title </title> <link id="siteThemeLink" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/excite-bike/jquery

仅在chrome中的html使选定值不可见，在其他浏览器中选择的背景是彩色的，只有在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>


标题
你好
你好
你好
有人知道修复方法吗？

Google Chrome不支持select上的背景图像，这就是为什么样式表中的规则会被打破

要解决此问题，您需要分别指定背景颜色和背景图像，以便不支持背景图像的浏览器不会忽略整个规则，但至少会选择他们支持的规则：

.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;
}
或者，您可以只在“样式”属性中设置背景色，但这并不像其他解决方案那样干净：

<select class='ui-state-error' style='background-color: #E69700;'>
使用jQuery，您可以做到这一点

$('#selectbox').css({
    'background': 'blue'
});
查看上的工作示例我知道这有点旧，但我在寻找相同的anwser时遇到了它，这是一种Css方法来解决这个问题

@媒体屏幕和（-webkit最小设备像素比：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;
}
}

希望它有帮助

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

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'});
}
});
这对我来说很好（mac-chrome）@amosrivera我在Windows7上x64@Hussein，是可以做到的，如果（chrome）所有这些东西^为什么在godsname中你会使用javascript（更糟糕的是，一个完整的javascript库）来修复一个小的css问题？如果你的轮胎瘪了，你会买一辆巨型卡车来载着你的车到处跑，这样它就可以继续行驶，还是仅仅修理瘪了的轮胎？@Stephan Muller，因为我已经用过了，我经常用它来代替css继承的缺失。你在问题中没有具体说明这一点。尽管如此，这些都是样式表属性，你可以用CSS修改它们。只是测试了这个例子，它在chrome中不起作用！单击下拉列表时，背景色为白色。这意味着您无法在没有猜测的情况下选择选项。请允许我们将此作为不可接受的答案！目前，Chrome浏览器需要此修复程序才能应用下拉选择背景色。我使用的是“版本24.0.1312.57 m”。在找到这个答案之前搜索了很多。谢谢@webLacky3rdClass！：）