input type="text" & background

Slyfox · January 27, 2008

Есть вот это:

<input type="text" style="background: #fff url(images/search.gif) no-repeat; padding-left:22px;">

Как только вводимые данные перестают влезать в строку, то IE6 сдвигает картинку, а Opera отображает текст по верху картинки. В Firefox не проверял.

Что в данном случае можно сделать?

Или это можно считать нормально

P.S. Первое что пришло в голову - это убрать у input рамку, а затем запихнуть это в div:

- background не использовать для input;

- поставить картинку и рядом с ней input;

- из div сделать рамку какая была у input изначально

Можно ли это сделать более проще?

klierik · January 27, 2008

не уверен, но можно попробывать

display: block; overflow: hidden;

Slyfox · January 27, 2008

Не помогло и многострочное чудо

Tokolist · January 27, 2008

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;}

p.input {
 position: relative;
}

p.input input {
 padding-left: 22px;
 height: 16px;
}

p.input img {
 position: absolute;
 top: 3px;
 left: 5px;
}
/*]]>*/
</style>
</head>
<body>

<form action="#">
<p>Люди часто начинают стремиться к великим целям, когда чувствуют, что им не по силам маленькие задачи. 
И не всегда безрезультатно... (Лев Шестов 1866-1938 гг.)</p>
<p class="input"><img src="rss.png" width="16" height="16" alt="" /><input type="text" /></p>
<p>Люди часто начинают стремиться к великим целям, когда чувствуют, что им не по силам маленькие задачи. 
И не всегда безрезультатно... (Лев Шестов 1866-1938 гг.)</p>
</form>

</body>
</html>

Slyfox · January 27, 2008

Спасибо.

Немного отрегулирую размеры и положение картинки и будет, то что надо.

Sign In

input type="text" & background

Question

Slyfox

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Slyfox

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

Slyfox

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information