給ZENCART加上相似wordpress彈性搜索框

給表單中的input加上id或class屬性。

我給input加了一個class屬性爲searchbar，然後在css文件中寫入如下屬性，即可以實現彈性搜索框，輸入框聚焦的時候會緩慢變長。

.searchbar{
width: 200px;
border-radius: 15px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px10px;
border:none;
 -moz-transition:all linear .5s;
-webkit-transition:all linear .5s;
color: #999;
border-radius: 15px; border:1pxsolid#ddd;-moz-box-shadow: inset 0 1px2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 1px2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);box-shadow: inset 0 1px2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
}
.searchbar:focus{ background-color: #f9f9f9;
width: 300px;}