White background in select box when viewing in Chrome_问答_开发者

White background in select box when viewing in Chrome

开发者 https://www.devze.com 2023-02-16 17:34 出处：网络

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

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="style开发者_运维知识库sheet" 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 ?

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

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

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

With jQuery you can do this

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

White background in select box when viewing in Chrome

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

精彩评论

关注公众号

热门标签

图文推荐

White background in select box when viewing in Chrome

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：