Дизайн для поиска DLE

Готовые дизайны для формы поиска DLE на чистом css.

Вариант №3. Поиск с кнопкой внутри инпута:

Код:

<form class="sear-v3" method="post">						
	<input id="story" name="story" placeholder="Виконати пошук..." type="search">
	<button type="submit" title="Виконати пошук"><i></i></button>
	<a href="/index.php?do=search&amp;mode=advanced" title="Розширений пошук на сайті">розширений пошук</a>
	<input type="hidden" name="do" value="search">
	<input type="hidden" name="subaction" value="search">
</form>

<style>
  /*poisk v3*/
.sear-v3 {height:45px;width:420px;position:relative;}
.sear-v3 button {width:26px; height:26px;background:#fff;position:absolute;top:2px;right:2px;padding:0;}
.sear-v3 button:before {content: '\e800'; font-family: 'fontello';display:block;width:26px; height:26px;color:#666666;font-size:15px;position:absolute;top:4px;left:0;z-index:88;}
.sear-v3 #story {width:100%;height:30px;padding-left:8px; border: 1px solid #666666;border-radius:3px;}
.sear-v3 #story:hover, .sear-v3 #story:focus {border: 1px solid #bababa;border-radius:5px;}
.sear-v3 #story:hover ~ button, .sear-v3 #story:focus  ~ button {opacity: 0.5; }
.sear-v3 > a {display:block;width:100px;text-align:center;background:#fff;font-size:9px;border: 1px solid #999999;color:#999999;border-radius:3px;position:absolute;top:-6px;right:50px;z-index:89;}

</style>