Стилизация формы поиска с расположением графики внутри поля ввода

Многие дизайнеры ищут оригинальные решения, чтобы дизайн выглядел привлекательнее. Часто при отрисовке формы поиска ее управляющие элементы располагаются внутри поля ввода. Такое решение выглядит стильным и современным, однако когда встречаешься с версткой данного элемента впервые, возникает вопрос. Как разместить управление внутри поля ввода в форме поиска?

Решение данной задачи простое. Нам необходимо задать подложку для родительского элемента поиска или самой формы, чтобы сложилось ощущение, что управление находится в внутри поля ввода. Для этого необходимо сделать следующее.

Вводим в макет форму поиска, вложив ее в div, который мы будем использовать в качестве подложки.

<div id="search">
	<form action="/search.html" method="post">
		<input class="input" type="text" name="search" value="" />
		<input class="submit" type="submit" name="submit" value="" />
	</form>
</div>

После чего описываем стили элементов формы с использование подложки для родительского тега:

#search {position:absolute;top:8px;left:612px;width:218px;height:25px;background:url('images/search.gif') no-repeat;}
.input {float:left;width:166px;height:16px;margin:4px 0 0 10px;font:italic 11px Arial, Helvetica, sans-serif;color:#777;border:0;}
.submit {width:20px;height:20px;margin:2px 0 0 10px;background:none;border:0;cursor:pointer;}

Здесь необходимо дать небольшие пояснения. В данном случае основной div с идентификатором search принимает на себя в качестве подложки картинку содержащую форму поиска. А поля ввода и отправки позиционируются в этом блоке таким образом, что возникает ощущение, что они и содежат все необходимую графику. Конечный вид данной стилизации можно увидеть на картинке: