Белый фон в окне выбора при просмотре в Chrome - PullRequest
Новая
       9

Белый фон в окне выбора при просмотре в Chrome

3 голосов
/ 11 марта 2011

этот 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>

кто-нибудь знает исправление?

Ответы [ 4 ]

4 голосов
/ 11 марта 2011

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;'>
2 голосов
/ 27 апреля 2011

Я знаю, что это немного устарело, но я столкнулся с ним, когда искал тот же самый anwser, и это способ Css исправить этот

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

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

}

Надеюсь, что это поможет

0 голосов
/ 18 июля 2012

Сначала вы должны определить браузер, чтобы решить проблему: 

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'});
}
});
0 голосов
/ 11 марта 2011

С помощью jQuery вы можете сделать это 

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

Проверьте рабочий пример на http://jsfiddle.net/B2NFE/2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...