Установить градиентный фон для выбора в Chrome

Question

Я хочу стилизовать выделение, и оно работает почти идеально, но в Google Chrome его поведение отличается, и я исправил это с помощью -webkit-appearance: none;, но при этом удалить также выберите стрелку.Я пытаюсь установить стрелку для моего выбора, но она не видна в Chrome, потому что я использую несколько фонов.Что я могу сделать, чтобы установить эту стрелку на Chrome.

select{
width:120px;
margin:10px;
background:url(http://s14.postimage.org/jls6v1ywt/select_background.png),
           url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg);
background-position: center center,100% 53%;        
background-repeat: repeat-x, no-repeat;
border:1px solid #DDDBD7;
-webkit-appearance: none;
}

посмотрите мой пример:

http://jsfiddle.net/DCjYA/359/

Answer 1

Поменяйте местами порядок фонов, чтобы фон «стрелки» был сверху.

http://dev.w3.org/csswg/css3-background/#layering

Первое изображение в списке - это слой, ближайший кпользователь, следующий за первым и так далее.Цвет фона, если имеется, закрашивается под всеми остальными слоями.

См .: http://jsfiddle.net/thirtydot/DCjYA/361/

background: url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg), url(http://s14.postimage.org/jls6v1ywt/select_background.png);
background-position: 100% 53%, center center;        
background-repeat: no-repeat, repeat-x;

Answer 2

select {
padding:9px;
margin: 0;
border-radius:4px;
-webkit-box-shadow: 
    0 0px 0 #ccc,
    0 0px #fff inset;
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
color:black;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none; 
cursor:pointer;
border: 1px solid #ccc;

}

Этот фрагмент кода решит вашу проблему. Просто измените отступы и используйте местные изображения или цветовые коды в соответствии с вашими потребностями. или используйте this для генерации кода для вас.

См .: Скрипка JS для градиента фона и стрелка вниз