給ZENCART加上類似wordpress彈性搜尋方塊

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

我給input加了一個class屬性爲searchbar，然後在css檔案中寫入以下屬性，便可以實現彈性搜尋方塊，輸入框聚焦的時候會緩慢變長。

1. .searchbar{

2. width: 200px;

3. border-radius: 15px;

4. font-size: 14px;

5. height: 22px;

6. line-height: 1.2em;

7. padding: 4px10px;

8. border:none;

9. -moz-transition:all linear .5s;

10. -webkit-transition:all linear .5s;

11. color: #999;

12. 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);

13. -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);

14. }

15. .searchbar:focus{ background-color: #f9f9f9;

16. width: 300px;}