Фоновое изображение для выбора (выпадающий) не работает в Chrome - PullRequest
Новая
       35

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

31 голосов
/ 09 февраля 2010

Я хочу использовать изображение для фона выбора / выпадающего. Следующий 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;}

Ответы [ 4 ]

79 голосов
/ 12 мая 2011 
select 
{
    -webkit-appearance: none;
}

Если вам нужно, вы также можете добавить изображение, которое содержит стрелку, как часть фона.

7 голосов
/ 17 мая 2010

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

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

4 голосов
/ 13 февраля 2010

Как правило, считается плохой практикой стилизовать стандартные элементы управления формой, потому что выходные данные выглядят такими разными в каждом браузере. См. 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 уменьшает эффект этого .

2 голосов
/ 12 июня 2014

Вы можете использовать приведенные ниже стили CSS для всех браузеров, кроме Firefox 30 

select {
  background: url(dropdown_arw.png) no-repeat right center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 90px;
  text-indent: 0.01px;
  text-overflow: "";
}

демонстрационная страница - http://kvijayanand.in/jquery-plugin/test.html

Обновлено

Вот решение для Firefox 30. Небольшой трюк для пользовательских элементов выбора в Firefox: псевдо-класс css -moz-any ().

http://blog.kvijayanand.in/customize-select-arrow-css/

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

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

...