动态搜索框 

<!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;
}
posted @ 2022-12-25 16:12  不尽人意的K  阅读(43)  评论(0)  编辑  收藏  举报