源码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
header {
font-family: helvetica, arial, sans-serif;
display: block;
overflow: hidden;
500px;
margin: 30px;
border-radius: 6px;
background-color: #C0A4FA;
}
form.stylin_form_search {
float: right;
200px;
margin: 5px;
padding: 5px;
}
form.stylin_form_search input {
float: right;
70px;
padding: 4px;
outline: none;
font-size: .8em;
border-color: #eee #ccc #eee #ccc;
border-radius: 10px;
transition: 1s width;
}
form.stylin_form_search input:focus {
200px;
}
form.stylin_form_search label {
display: none;
}
</style>
</head>
<body>
<header>
<form class="stylin_form_search" action="#" method="post">
<label for="search">search</label>
<input type="search" id="search" name="search" placeholder="search">
</form>
</header>
</body>
</html>