CSS搜索框

<title>CSS搜索框</title>

<style type="text/css">

.searchinput{

    border-right-width: 0px;

    padding-left: 3px;

    width: 168px;

    font-family: arial;

    float: left;

    border-top-width: 0px;

    border-bottom-width: 0px;

    color: #636365;

    margin-left: 4px;

    font-size: 8pt;

    vertical-align: middle;

    border-left-width: 0px;

    margin-right: 3px;

}

.tab_search{

    border-bottom: #cccccc 1px solid;

    border-left: #cccccc 1px solid;

    height: 25px;

    border-top: #cccccc 1px solid;

    border-right: #cccccc 1px solid;

}

.searchaction{

    width: 21px;

    float: left;

    height: 17px;

}

</style>

<form action="#" name="search">

<table border="0" cellpadding="0" cellspacing="0" class="tab_search">

    <tr>

        <td>

<input type="text" name="q" title="Search" class="searchinput" id="searchinput" onkeydown="if (event.keyCode==13) {}" onblur="if(this.value==‘‘)value=‘请输入商品关键字‘;" onfocus="if(this.value==‘请输入商品关键字‘)value=‘‘;" value="请输入商品关键字" size="10"/>

        </td>

        <td>

            <input type="image" width="21" height="17" class="searchaction" onclick="if(document.forms[‘search‘].searchinput.value==‘- Search Products -‘)document.forms[‘search‘].searchinput.value=‘‘;" alt="Search" src="images/searchbutton.gif" border="0" hspace="2"/>

        </td>

    </tr>

</table>

</form>

CSS搜索框