給表單中的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;}