Как сверстать форму поиска?

[FoxyFru]

Как сверстать такое? Подскажите. Есть два input'а Первый понятно наверное как оформлять, а вот sumbit (синий кружок) не знаю как. Нужно как-то убрать текст с кнопки и поставить background в виде картинки что ли, только как его убрать, этот текст?

Html

<form action="">
    <input type="text" id="search" value="Поиск" />
    <input type="submit" id="submit" value="???" />
</form>

[hedgehog]

А чем не устраивает value="" ? Кружок, при желании, можно сделать без картинок при помощи border-radius & background

Edited December 22, 2011 by hedgehog

[FoxyFru]

А чем не устраивает value="" ? Кружок, при желании, можно сделать без картинок при помощи border-radius & background

Действительно чем меня не устраивает value="".

А вот по поводу сабмита, он будет оформлен красиво, не просто синий кружок.

Я правильно мыслю? Мне нужно разрезать эту картинку на две части и сделать background текстовому инпуту (левая часть картинки) и сабмиту (правая часть).

Сейчас на картинке это просто набросок. В итоге он будет с градиентами и тенями.

[dostel1]

Сделай div шириной и высотой равной этой форме и влепи туда bg с этим фоном.

Потом 2 поля отпозиционируй (float или position ) так чтобы поля находились на соотв.фоне!

Убираеш для полей border,bg(transparent,none).Готово

[FoxyFru]

Сделай div шириной и высотой равной этой форме и влепи туда bg с этим фоном.

Потом 2 поля отпозиционируй (float или position ) так чтобы поля находились на соотв.фоне!

Убираеш для полей border,bg(transparent,none).Готово

Вот это действительно лучше. Спасибо. Сделано.

[hedgehog]

Если сайт верстается для забугорья, кстати, то отсутствие value у кнопки нежелательно (либо нужно к кнопке привязать label). Связано это тем, что у пользователей с проблемным зрением должна быть возможность прочитать текст у кнопки через скринридер, которые у нас вроде бы не особо распространены. Текст на кнопке можно скрыть, убрав его text-indent'ом, например. Или label с visibility: hidden или что-то около того.

Как все это влияет на СЕО, я не скажу.

[stars]

Сверстать такое можно:

1) Используя css3 в частности border-radius

2) Используя background

Касательно submit картинкой вам не чего не мешает воспользоваться

<input type="image" src="images/imgbutton.gif">

Разница с обычным type="submit" лишь в том, что еще передаются координаты клика(x,y)...