没加css的效果：
添加css的效果：
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>搜索表单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header{
font-family: helvetica,arial,sans-serif;
display: block;
overflow: hidden;
width: 500px;
margin: 30px;
border-radius: 6px;
background-color: #dddddd;
}
/*包含 label 和 input 的容器*/
form.stylin_form_search1{
float: right;
width: 200px;
margin: 5px;
padding: 5px;
}
form.stylin_form_search1 input{
float: right;
width: 70px;
padding: 2px 0 3px 5px;
outline: none; /*去掉默认的突显轮廓线*/
font-size:.8em; border-color:#eee #ccc #ccc #eee;
/*针对其他浏览器的厂商前缀*/
border-radius:10px;
-webkit-transition:1s width;
}
form.stylin_form_search1 input:focus {
width:200px;
}
form.stylin_form_search1 label {
display:none;/*标注是必要的，但不用显示出来*/
}
</style>
</head>
<body>
<header>
<form id="" class="stylin_form_search1" action="#" method="post">
<label for="search">search</label>
<input type="search" id="search" name="search" placeholder="search"/>
</form>
</header>
</body>
</html>
原文：http://my.oschina.net/Cheney521/blog/530677