Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

White background in select box when viewing in Chrome

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 ?

like image 401
Omu Avatar asked Nov 15 '22 01:11

Omu


1 Answers

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;'>
like image 57
Stephan Muller Avatar answered Nov 16 '22 16:11

Stephan Muller