效果图：
代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>可伸缩搜索框demo</title> </head> <body> <style type="text/css"> .search-input{ background: #ededed url( http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px; padding: 8px 5px 8px 32px; width: 100px; border-radius: 18px; color: #ccc; outline: none; overflow:hidden; border-radius: 18px; 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; } .search-input:hover, .search-input:focus { border-color: #fff; color: #444; width: 200px; } </style> <div class="search-mb"> <input class="search-input" type="text" value="请输入搜索内容..." onblur="if(this.value==‘‘) value=‘请输入搜索内容...‘;" onclick="if(this.value==‘请输入搜索内容...‘)value=‘‘;"/> </div> </body> </html>
原文：http://www.cnblogs.com/ryans/p/6858257.html