Зачастую многие дизайнеры в своих работах используют отличные от стандартных элементы форм. К сожалению, в процессе вёрстки подобных элементов иногда возникают те или иные трудности. Например, Dimox недавно поднял вопрос вертикального выравнивания у кнопок в FF.
Я же хочу обратить ваше внимание на баг, который присутствует в IE6, 7 у текстовых полей с фоновым изображением.
1 | <input type="text" /> |
1 2 3 4 5 6 7 8 | input{ width:200px; height:19px; padding:8px 10px; border:none; background:url(images/input-bg.png) no-repeat left top; font:1em Arial,Helvetica,sans-serif } |
В том случае, если введенный текст превышает ширину элемента, фоновое изображение в IE6, 7 начинает смещаться.
Использование background-attachment: fixed работает только в IE6, в 7-ке проблема остаётся.
Можно указывать background-position: right bottom для фона. В этом случае изображение смещается в противоположную сторону, и смещения не видно, если не перемещать курсор обратно, в начало текста.
Наиболее универсальным способом является использование дополнительного элемента, например span, с необходимым фоном.
Жду ваших комментариев.
Только сегодня утром закончил вёрстку макета, в котором использовались нестандартные поля ввода. Также как и вы положил прелести фоном к этим полям, но столкнулся с 2мя проблемами в ИЕ:
1. Фон скачет как и у вас
2. Поле разъезжается если в него ввести символов больше, чем в видимой области.
Проблему решил при помощи оберки из span, погуглив, толкового решения так и не нашел.
Если есть варианты помимо обёртки в span — поделитесь.
При использовании <span>, курсора не видно.
Можно полю добавить padding в 1px по бокам, тогда будет видно.
А пользовать в кач-ве фона фон родителя (fieldset, form) не вариант?
А если полей ввода много?
А почему бы просто не использовать div с нужным background, в а в него уже прозрачное поле ввода?
Получается тоже самое, но меньше головной боли.
Если у Вас все-таки цель добиться корректной работы background’а именно в input, то извините что не в тему.
Да, хотелось бы обойтись без лишних элементов.
а почему вы используете спан? я использовал див и курсор видно
Можно и
div. Это не критично.разница в том что див блочный элемент
В примере
spanтоже блочный. Да собственно какая разница, проблема не в этом.разница была бы, если , скажем, div засунули внутрь Label (а у меня часто бывает input внутри label) — валидатор такое не одобряет. а span -пожалуйста
А чт окасается самой проблемы, то да, тоже был немало огорчен, не найдя решения для IE7. Так что это редкий случай, когда даже ie6 рулит
display: block; вот тебе и span ведет как блок себя. Разве я не прав?
Нет, не прав. Селектор display влияет только на ОТОБРАЖЕНИЕ элемента. Сам элемент по прежнему остается строковым. А спецификация запрещает наличие блочных элементов внутри строковых.
Глупости какие.
можно использовать свойство maxlength=»ваша длинна», конечно это не поможет в ситуации при вводе намеренно большого количества символов, лично пока не сталкивался с необходимостью таких полей где была бы данная необходимость, так как если нужно передать объем текста используется textarea …
Это не решение проблемы, а заплатка.
Вот тут (www.regul.su) проблема решена.
Посмотрите поиск как в шапке устроен.
Или я чего-то не понял?
В вашем примере фон не у элемента
input, а у родительскогоdiv.Возможно ли на чистом CSS выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон? Как здесь: http://www.alexandergusev.com/
Не думаю. В данном случае, нужен не ресайз, а фиксированное положение фона.
можно еще сделать для ие 6 и 7 позицию бекраунда как 100% 0 тогда фон прижиvается к правому краю, он немножко скачет при вводите длиного текста, но зато так не уезжает сильно. В любом случаи получше.
Идеальное отображение только если оборачивать, либо стилизовать инпут с помощью js
Можно, но в этом случае косяк будет если вернуться в начало поля.