VPF::padding-right в текстовом поле - Форум программистов

Marilyn Omen

Дата 8.10.2007, 11:31 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 17.12.2003
Где: Украина, Львов

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

Привет.
Задача: нужно немного кастомизировать стандартный input[text]. В частности, поставить ему фоновую картинку, как, например, сделано поле логина в livejournal:
user posted image

Соответственно, чтобы текст не наползал на картинку, задается padding-left по ширине этой картинки (или чуть больше).

Но в моем случае картинку нужно поставить справа. Здесь, собственно, и проблемма: очень странно выглядит поведение ie, когда набираемый текст доходит до правого края поля. Паддинг как бы "дергается", почему-то еще и вместе с фоном. Описать трудно, вот пример реализации:

Код


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Field</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <style type="text/css">
  .field {
    padding-right: 20px;
    background: transparent url(http://www.livejournal.com/stc/lanzelot/img/user.gif) 100% 50% no-repeat;
  }
  </style>
</head>
<body>
  <div>
    <input type="text" class="field" />
  </div>
</body>
</html>

Попробуйте набирать длинный текст в это поле в ие.
Стыкался ли кто с таким, и есть ли пути решения?

Illuminaty

Дата 8.10.2007, 12:04 (ссылка)

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

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

А так не подойдет:

Код


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Field</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <style type="text/css">
  .field {
    border-width: 0px;
  }
  .outField{
    border: 1px #000000 solid;
    position: relative;
    float: left;
    padding-right: 20px;
    background: transparent url(http://www.livejournal.com/stc/lanzelot/img/user.gif) 100% 50% no-repeat;
  }
  </style>
</head>
<body>
  <div class="outField">
    <input type="text" class="field" />
  </div>
</body>
</html>

Marilyn Omen

Дата 8.10.2007, 15:07 (ссылка)

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

Загрузка ...

Illuminaty, спасибо, оригинальное решение. Только боюсь не прокатит, я выше этого не написал, но одно из условий - чтобы клик на иконке не вызывал у инпута событие onblur. Вот поэтому и такие извращения с засовыванием иконки в его бэкграунд.

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