VPF::Не отображается background image - Форум программистов

localhost

Дата 23.3.2012, 11:27 (ссылка)

(нет голосов)

Загрузка ...

Хирург-длятехкт

Профиль
Группа: Участник
Сообщений: 712
Регистрация: 8.11.2005
Где: Н.Новгород

Репутация: нет
Всего: 43

В drupal хочу кастомизировать блок с формой поиска, чтобы в поле ввода текста слева отображалась картинка

Код


<section id="block-search-form" class="block block-search">
  <div class="content">
    <form action="/production" method="post" id="search-block-form" accept-charset="UTF-8"><div><div class="container-inline">
      <h2 class="element-invisible">Форма поиска</h2>
    <div class="form-item form-type-textfield form-item-search-block-form">
  <label class="element-invisible" for="edit-search-block-form--2">Поиск </label>
 <input title="Введите ключевые слова для поиска." onblur="if (this.value == '') {this.value = 'Поиск';}" onfocus="if (this.value == 'Поиск') {this.value = '';}" type="search" id="edit-search-block-form--2" name="search_block_form" value="Поиск" size="16" maxlength="128" class="form-text" />
</div>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Поиск" class="form-submit" /></div><input type="hidden" name="form_build_id" value="form-MQxgCU4xHs2C7lqQU_b1_Wv-h_d6_8mKk-vBMQZlJPo" />
<input type="hidden" name="form_id" value="search_block_form" />
</div>
</div></form>  </div>

CSS определил такое:

Код


#search-block-form input {        
    color: #999;
    padding: 5px 2px 5px 30px;
    border: 1px solid #CCC;
    background: url('/images/search_g.png') no-repeat scroll 5% 50%;
    }

В ФФ, IE все норм, но вот Chrome почему-то в упор не показывает картинку. Инспектировал в Firebug-lite, вроде все в порядке (картинка при прямом обращении доступна)

Код


#search-block-form input {
  background-attachment:scroll;
  background-clip:initial;
  background-color:initial;
  background-image:url(http://domain.tld/images/search_g.png);
  background-origin:initial;
  background-position:5% 50%;
  background-repeat:no-repeat no-repeat;
  border-bottom-color:#CCCCCC;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-image:initial;
  border-left-color:#CCCCCC;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:#CCCCCC;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:#CCCCCC;
  border-top-style:solid;
  border-top-width:1px;
  color:#999999;
  padding-bottom:5px;
  padding-left:30px;
  padding-right:2px;
  padding-top:5px;
}

С чем это может быть связано?

Это сообщение отредактировал(а) localhost - 23.3.2012, 11:28

--------------------

ВСЕ Нижегородцы! Отмечаемся здесь!!!
Jabber ID: [email protected]

user posted image

ElGuapo

Дата 23.3.2012, 17:51 (ссылка)

(нет голосов)

Загрузка ...

Добрый

Профиль
Группа: Участник
Сообщений: 101
Регистрация: 1.7.2006

Репутация: 2
Всего: 3

Chrome - WebKit-браузер, все из-за этого.

В CSS добавьте:

Код


-webkit-appearance: none;

И все получится

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »