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

发布于 2024-10-21 17:23:15 字数 587 浏览 2 评论 0原文

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

有人知道修复吗？

原文

this html only in chrome makes the selected value non visible, the bacground of the select in other browsers is colored, only in chrome it's white

<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>

anybody knows a fix ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅紫色的梦幻 2024-10-28 17:23:16

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;'>

Google Chrome doesn't support a background image on a select, which is why the rule in the stylesheet breaks.

To fix it you will need to specifiy the background color and background image separately, so that browsers that don't support the background image will not ignore the entire rule but will at least pick up the rules they do support:

.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;
}

Alternately, you could just set the background color in the style attribute, but this is not as clean as the other solution:

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

回复收藏 0 原文

合久必婚 2024-10-28 17:23:16

我知道这有点旧，但我在寻找相同的 anwser 时遇到了它，这是修复此

@media screen 的 Css 方法和 (-webkit-min-device-pixel-ratio:0) { // target仅-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;
}

}

希望有帮助

I know this is a little old but I ran onto it when looking for the the same anwser and the is a Css way to fix this

@media screen and (-webkit-min-device-pixel-ratio:0) { // target only -webkit browsers

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;
}

}

Hope that it helps

回复收藏 0 原文

别念他 2024-10-28 17:23:16

首先你必须检测浏览器来解决问题：

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'});
}
});

First you have to detect the browser to fix the issue:

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 )
};

Then change the font color to black:

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

回复收藏 0 原文

以往的大感动 2024-10-28 17:23:16

使用 jQuery，您可以

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

在 http://jsfiddle.net/B2NFE/2/ 处检查工作示例

With jQuery you can do this

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

Check working example at http://jsfiddle.net/B2NFE/2/

回复收藏 0 原文

~没有更多了~

关于作者

路还长，别太狂

暂无简介

0 文章

0 评论

877 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

在 http://jsfiddle.net/B2NFE/2/ 处检查工作示例

Check working example at http://jsfiddle.net/B2NFE/2/

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

在 http://jsfiddle.net/B2NFE/2/ 处检查工作示例

Check working example at http://jsfiddle.net/B2NFE/2/

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。