Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > padding-right в текстовом поле

Автор: Marilyn Omen 8.10.2007, 11:31

Привет.
Задача: нужно немного кастомизировать стандартный 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

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

Код


<?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. Вот поэтому и такие извращения с засовыванием иконки в его бэкграунд.