Оформление текстового поля и кнопки submit

[nick1m]

Не могу понять, каким образом вставляются картинки для изменения внешнего вида текстового поля "search" и кнопки отправки запроса на opera.com в нижнем правом углу. В стилях вроде бы не нашёл.
Сами картинки :

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

код формы:

<form action="/search/" method="get" id="wwwsearch">
<p>
<input type="hidden" name="start" value="1" id="start" />
<input type="hidden" name="end" value="10" id="end" />
<label for="words" class="yank">Search www.opera.com</label>
<input type="text" value="" name="words" id="words" />
<input type="image" value="Search" title="Search www.opera.com" src="/bitmaps/common/search/input-icon.gif" alt="Go" id="go" />
</p>
</form>

Помогите разобраться, заранее благодарен!

 

[mdss]

#footer .search {background: url('/bitmaps/common/search/input-middle.png') repeat-y 0 0;margin:0;padding-top:1px;}
#footer .search form {background: url('/bitmaps/common/search/input-top.png') no-repeat 0 0;}
#footer .search p {background: url('/bitmaps/common/search/input-bottom.png') no-repeat 0 100%;padding:3px 0 1px 8px;margin:0;}
#footer .search #words {border:0;background:transparent;height:18px;width:122px;color:#666;margin:0;padding-left:0;padding-right:0;}
#footer .search #go {vertical-align:top;margin-left:5px;}

10 букафок

 

[капрал]

все вроде нормально.. но обьясните, зачем было резать бэкграунд текстового поля на две части: нижнюю и верхнюю? что это дало верстальщику opera.com? [несарказм]

 

[rafic]

Обычно делают два края и заполняющюю картинку по середине. Я тоже удивился такому способу...

 

[nick1m]

а кнопка там чем к сабмиту привязывается JS?

 

[mdss]

а кнопка там чем к сабмиту привязывается JS?

type="image" выполняет туже функцию, что и type="submit"

 

[nick1m]

а если текстовую кнопку делать, то только так: <a href="#" onClick="this.form.submit()">Выйти</a>?