动态搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="new_file2.css">
</head>
<body>
<form action="https://zh.wikihow.com/wikiHowTo" method="get">
<div class="box">
<input type="text" name="search" placeholder="How to...">
<input type="submit" value="">
</div>
</form>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #E17055;
}
.box{
background-color: #2f3640;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 70px;
border-radius: 50px;
padding: 15px;
}
input[type=text]{
display: block;
float: left;
width: 0px;
height: 70px;
line-height: 70px;
background-color: #2f3640;
color: white;
border: none;
outline: none ;
transition: all 0.5s;
font-size: 35px;
border-radius: 35px;
}
input[type=submit]{
display: block;
float: right;
width: 70px;
height: 70px;
border: 0px;
border-radius: 35px;
transition: all 0.5s;
background-color: #2f3640;
background-image: url(搜索.png);
background-size: 70px;
}
span.iconfont{
font-size: 70px;
color: #E17055;
}
.box:hover input[type=text]{
width: 300px;
padding-left: 20px;
}
.box:hover input[type=submit]{
background-color: white;
}
本文来自博客园,作者:不尽人意的K,转载请注明原文链接:https://www.cnblogs.com/duan-rui/p/16945525.html