Фоновое изображение для (выпадающего) Выбора не работает в Chrome

Question

Фоновое изображение для (выпадающего) Выбора не работает в Chrome

Я хочу использовать изображение для фона избранного/выпадающего. Следующий CSS хорошо работает в Firefox и IE, но не делает в Chrome:

#main .drop-down-loc { width:506px; height: 30px; border: none; 
  background-color: Transparent; 
  background: url(images/text-field.gif) no-repeat 0 0; 
  padding:4px; line-height: 21px;}

31

css google-chrome

задан Danny G 4 April 2013 в 15:19

2 ответа

Другие вопросы по тегам:

css google-chrome

Похожие вопросы:

score 5 · Answer 1

Как правило, стилизовать стандартные элементы управления формой считается плохой практикой, потому что вывод выглядит по-разному в разных браузерах. См .: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ для некоторых визуализированных примеров.

При этом мне повезло сделать цвет фона значением RGBA:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #d00;
      }
      select {
        background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0; 
        padding:4px; 
        line-height: 21px;
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Foo</option>
      <option>Bar</option>      
      <option>Something longer</option>     
  </body>
</html>

Google Chrome по-прежнему отображает градиент поверх фонового изображения в цвете, который вы передаете в rgba (r, g, b , 0,1), но выбор цвета, который дополняет ваше изображение, и установка альфа 0,1 уменьшает эффект этого.

score 7 · Answer 2

То, что сказал Арне, нельзя точно оформить для полей выбора и сделать так, чтобы они выглядели одинаково во всех браузерах.

Uniform: https://github.com/pixelmatrix/uniform - это javascript-решение, которое дает вам хороший графический контроль над вашими элементами формы - это все еще Javascript, но он так же хорош, как javascript для решение этой проблемы.