Вертикальное выравнивание в input type="text"

Kaiden · June 11, 2008

Доброго времени суток, уважаемые форумчане.

У меня есть текстовый input, который должен выглядеть вот так . При этом текст, который пользователь вводит в это поле, должен быть центрирован вертикально.

В коде это выглядит так:

HTML:

<form action="" method="get">
 <input class="search" type="text" name="search" value="Поиск" />
 <input class="submit" type="image" src="images/lens.png" name="doSubmit" />
</form>

CSS:

 input.search {
 background: url(images/search_box.gif) top left no-repeat;
 font: 12px 'Arial';
 height: 21px;
 line-height: 21px;
 width: 95px;
}

Проблема в вертикальном центрировании текста. Opera центрирует по умолчанию, IE - при указании line-height, Firefox не делает ни того, ни другого. Можно, конечно, задать padding-top для Файрфокса, но тогда текст уйдет вниз в Опере, которая сама по умолчанию размещает его в центре. Единственное, что я могу придумать, - это сделать хак для Оперы, в котором отменю действие padding-top.

Может, есть более красивые идеи? Буду рад их услышать

maddogrts · June 11, 2008

padding

Tokolist · June 11, 2008

странно... vertical-align не работает...

как вариант

<!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[*/
* {margin: 0; padding: 0;}

p.cinput {
 position: relative;
 height: 100px;
 width: 500px;
 border: 1px solid #0f0;
}

p.cinput input {
 position: absolute;
 left: 0;
 top: 50%;
 margin-top: -30px;
 height: 60px;
 width: 100%;
 font-size: 50px;
 border: 0;
}

/*]]>*/
</style>
</head>
<body>

<form action="#">
<p class="cinput"><input type="text" value="XXX" /></p>
</form>

</body>
</html>

Kaiden · June 12, 2008

Tokolist

О, спасибо. Слегка переделал под себя - и заработало

Sign In

Вертикальное выравнивание в input type="text"

Question

Kaiden

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

maddogrts

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

Kaiden

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information