Geek asks and answers

White background in the selection box when viewing in Chrome

this html only in chrome makes the selected value invisible, the selection bacground in other browsers is colored, only in chrome it 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>

Does anyone know a fix?

+3
source share
4 answers

With jQuery you can do it

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

Check out the working example http://jsfiddle.net/B2NFE/2/

-4
source

Google Chrome does not support the background image when selected, so the rule in the stylesheet breaks.

To fix this, you will need to specify the background color and background image separately so that browsers that do not support the background image will not ignore the entire rule, but at least take the rules that they 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;
}

style, , :

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

I know this is a little old, but I came across it when I was looking for the same anwser, and this is the Css way to fix it

@media screen and (-webkit-min-device-pixel-ratio: 0) {// target -webkit only 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 this helps

+2
source

First you need to detect the browser to fix the problem:

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
source

More articles:


All Articles