Форма с кнопкой

[Delat]

Как верстаются такие кнопки:

http://joxi.ru/yYwqVIwyTJBgeQmmPUE

http://joxi.ru/y40qVIwyTJDVAvBqhbk

<div id="search" class="form-box">    <form action="/search/">    <input id="form" type="text" name="q" placeholder="Поиск товара..." value=""  maxlength="50" autocomplete="off">        </form>    </div><input name="s" type="submit" value="jr"  id="submit">

div.form-box	{		position: relative;		z-index: 2;		left: 20px;		top: 20px;/*22px;*/		margin: 0;		padding: 0;}	#form {		position: absolute;		height: 30px;/*24px;*/		margin: 0;		padding: 0 7px;		width: 270px;		border-top: transparent;		border-bottom: transparent;		border-left: 1px solid #000;		border-right: 1px solid #000;		}#form:focus {		box-shadow: inset 0 0 2px #DB9900;		-webkit-box-shadow: inset 0 0 2px #DB9900;		-moz-box-shadow: inset 0 0 2px #DB9900;}

Edited September 30, 2014 by Delat

[klierik]

а в чем возникает проблема?

[Delat]

а в чем возникает проблема?

не пойму как кнопку (он же рисунок "лупа") разместить внутри поля http://jsfiddle.net/rmbnpyr4/

[Switch74]

для этого используют :after с фоновой картинкой

[Delat]

всё получилось, спасибо

вот ещё статья http://htmlbook.ru/faq/kak-sdelat-knopku-vnutri-polya-dlya-poiska