1、html5程式碼如下：

<section class="topseacher">

<input type="text" id="searchinput" name="s" class="searchinput" placeholder="在這裡搜尋" />

<input type="submit" id="searchsubmit" class="buttons" value="→" />

</section>

2、css3程式碼如下：

/*搜尋容器*/

.searchinput{

float:left;/*對齊*/

width:160px;/*寬度*/

height:28px;/*高度*/

padding:0 0 0 5px; /*內間距*/

border:#063 1px solid; /*邊框*/

border-right:none; /*右邊框*/

color:#949494; /*字型顏色*/

overflow:hidden; /*溢位*/

font-size:12px; /*字號*/

-webkit-transition:width .4s ease-in; /*動畫效果：允許CSS的屬性值在一定的時間區間內平滑地過渡*/

}

/*搜尋欄：滑鼠放上時候*/

.searchinput:hover{/*滑鼠劃過時的樣式*/

width:240px; /*

寬度*/

color:#222; /*顏色*/

}

/*搜尋欄：獲得焦點時候*/
.searchinput:focus{ /*獲得焦點時*/

outline:none; /*外邊框*/

}

/*搜尋按鈕*/
.buttons{

float:left; /*浮動位置*/

height:30px; /*高度*/

width:40px; /*寬度*/

cursor:pointer; /*滑鼠指標*/

border:#063 1px solid; /*邊框*/

border-left:none; /*左邊框*/

background:hsla(120,100%,20%,1); /*背景*/

color:#fff; /*顏色*/

}

/*搜尋按鈕：滑鼠放上時*/

.buttons:hover{

background:#903; color:#fff; /*顏色*/

}

在chrome瀏覽器上顯示效果如下：

注意：

1、當你把transition放在.searchinput裡面時，移下移上都會很平滑，但放在.searchinput:hover裡面時，只有在移上時平滑，移下時就很生硬了。

2、.topseacher裡是right還是left,決定寬度向哪個方向運動。