jquery ui search box

cool jquery ui search textbox design

by mpmckenna8

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="ui-toolbar ui-widget-header ui-helper-clearfix" style="padding:5px;"> <span style="position: absolute;" class="btnSearch ui-state-default" title="search">
        <span class="ui-icon ui-icon-search"></span>
</span>
    <input type="text" placeholder="Search" />
</div>

CSS

body {
    padding:20px;
    display:inline-box;
}
input[type="text"] {
    height: 25px;
    padding: 1px 6px 0 10px;
    border: 1px solid #BBB;
    float:left;
    width:82.5%;
    margin-left:25px;
    display:inline-block;
}
.btnSearch {
    position: relative;
    padding: 5px;
    cursor: pointer;
    float: left;
    margin-right:-15px;
    display:inline-block;
}