<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>搜索表单</title>
<style>
* {margin:0; padding:0;}
header { /*在这个例子中代表页眉*/
font-family:helvetica, arial, sans-serif;
display:block;
overflow:hidden;
width:500px;
margin:30px;
border-radius:6px;
background-color:#ddd;
}
form.stylin_form_search1 { /*包含label 和input 的容器*/
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:2s width;
}
form.stylin_form_search1 input:focus {width:200px;}
form.stylin_form_search1 label {display:none;} /*标注是必要的，但不用显示出来*/
</style>
</head>
<body>
<header>
<form 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>