純CSS實現平滑伸縮的搜索框【前端開發技能必備系列】

有個朋友看到一個能伸縮的搜索框，叫我給他做。我到他所說的網站看了一下，馬上告訴他：這個能伸縮的框框得用 js 輔助才能實現，要是為了圖方便，在頁面上調用一個百十來K的js框架，就太不值得了，建議他不要實現這個功能了。但是，今天又看到類似的一個搜索框，仔細扒了代碼，才發現，這個伸縮功能只用CSS就可以實現！我又誤人子弟了......

經常使用IE的朋友（園里應該不多了吧）請換個瀏覽器測試，因為....這個代碼依然不能用在IE上....

這個先看一下效果比較好：
http://www.threesnow.com/code/087/

然后就是實現方式了。先定義默認的文本框樣式：

 

input, textarea{  
    color: #666;  
    padding: 6px;  
    margin: 10px;  
    outline: none;  
    overflow:hidden;  
    border-radius: 5px;  
    background: #fafafa;  
    border: 1px solid #ddd;
}  

要利用CSS實現文本框在獲得焦點時實現平滑伸縮，關鍵因素有兩個，其中一個就是使用 focus 偽類設置想要變化的長度：

.style1{  
    width: 150px;  
}  
.style1:focus{  
    width: 230px;  
}  
.style2{  
    float: right;  
    width: 150px;  
}  
.style2:focus{  
    width: 230px;  
}  
.style3{  
    width: 10%;  
}  
.style3:focus{  
    width: 98%;  
}  
.style4{  
    height: 2em;  
    width: 230px;  
}  
.style4:focus{  
    height: 8em;  
}  

另一個關鍵因素就是針對文本框設置瀏覽器的私有屬性設置，以此來控制伸縮的平滑變化，設置如下：

input, textarea{  
    color: #666;  
    padding: 6px;  
    margin: 10px;  
    outline: none;  
    overflow:hidden;  
    border-radius: 5px;  
    background: #fafafa;  
    border: 1px solid #ddd;  
    -moz-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);  
    -webkit-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);  
    box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);  
    -webkit-transition: all .3s;  
    -moz-transition: all .3s;  
    -o-transition: all .3s;  
} 

再把HTML代碼加上，效果就出來了。

<input class="style1" type="text" value="向右伸長一點點" />  
<br />  
<input class="style2" type="text" value="向左伸長一點點" />  
<br />  
<input class="style3" type="text" value="什么？你的搜索詞很長？這個夠用嗎？" />  
<br />  
<textarea class="style4">下面有什么東西呢？   
  
祝君好運！ 
~~~~</textarea> 

 

另外，在此再一次對IE表示一下失望。