8个好用的搜索框

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>8款纯CSS3搜索框</title>
		<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="style.css">
		<style>
			* {
				box-sizing: border-box;
			}
			
			body {
				margin: 0;
				padding: 0;
				background: #494A5F;
				font-weight: 500;
				font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
			}
			
			#container {
				width: 500px;
				height: 820px;
				margin: 0 auto;
			}
			
			div.search {
				padding: 30px 0;
			}
			
			form {
				position: relative;
				width: 300px;
				margin: 0 auto;
			}
			
			input,
			button {
				border: none;
				outline: none;
			}
			
			input {
				width: 100%;
				height: 42px;
				padding-left: 13px;
			}
			
			button {
				height: 42px;
				width: 42px;
				cursor: pointer;
				position: absolute;
			}
			/*搜索框1*/
			
			.bar1 {
				background: #A3D0C3;
			}
			
			.bar1 input {
				border: 2px solid #7BA7AB;
				border-radius: 5px;
				background: #F9F0DA;
				color: #9E9C9C;
			}
			
			.bar1 button {
				top: 0;
				right: 0;
				background: #7BA7AB;
				border-radius: 0 5px 5px 0;
			}
			
			.bar1 button:before {
				content: "\f002";
				font-family: FontAwesome;
				font-size: 16px;
				color: #F9F0DA;
			}
			/*搜索框2*/
			
			.bar2 {
				background: #DABB52;
			}
			
			.bar2 input,
			.bar2 button {
				border-radius: 3px;
			}
			
			.bar2 input {
				background: #F9F0DA;
			}
			
			.bar2 button {
				height: 26px;
				width: 26px;
				top: 8px;
				right: 8px;
				background: #F15B42;
			}
			
			.bar2 button:before {
				content: "\f105";
				font-family: FontAwesome;
				color: #F9F0DA;
				font-size: 20px;
				font-weight: bold;
			}
			/*搜索框3*/
			
			.bar3 {
				background: #F9F0DA;
			}
			
			.bar3 form {
				background: #A3D0C3;
			}
			
			.bar3 input,
			.bar3 button {
				background: transparent;
			}
			
			.bar3 button {
				top: 0;
				right: 0;
			}
			
			.bar3 button:before {
				content: "\f002";
				font-family: FontAwesome;
				font-size: 16px;
				color: #F9F0DA;
			}
			/*搜索框4*/
			
			.bar4 {
				background: #F15B42;
			}
			
			.bar4 form {
				background: #F9F0DA;
				border-bottom: 2px solid #BE290E;
			}
			
			.bar4 input,
			.bar4 button {
				background: transparent;
			}
			
			.bar4 button {
				top: 0;
				right: 0;
			}
			
			.bar4 button:before {
				content: "\f178";
				font-family: FontAwesome;
				font-size: 20px;
				color: #be290e;
			}
			/*搜索框5*/
			
			.bar5 {
				background: #683B4D;
			}
			
			.bar5 input,
			.bar5 button {
				background: transparent;
			}
			
			.bar5 input {
				border: 2px solid #F9F0DA;
			}
			
			.bar5 button {
				top: 0;
				right: 0;
			}
			
			.bar5 button:before {
				content: "\f002";
				font-family: FontAwesome;
				font-size: 16px;
				color: #F9F0DA;
			}
			
			.bar5 input:focus {
				border-color: #311c24
			}
			/*搜索框6*/
			
			.bar6 {
				background: #F9F0DA;
			}
			
			.bar6 input {
				border: 2px solid #c5464a;
				border-radius: 5px;
				background: transparent;
				top: 0;
				right: 0;
			}
			
			.bar6 button {
				background: #c5464a;
				border-radius: 0 5px 5px 0;
				width: 60px;
				top: 0;
				right: 0;
			}
			
			.bar6 button:before {
				content: "搜索";
				font-size: 13px;
				color: #F9F0DA;
			}
			/*搜索框7*/
			
			.bar7 {
				background: #7BA7AB;
			}
			
			.bar7 form {
				height: 42px;
			}
			
			.bar7 input {
				width: 250px;
				border-radius: 42px;
				border: 2px solid #324B4E;
				background: #F9F0DA;
				transition: .3s linear;
				float: right;
			}
			
			.bar7 input:focus {
				width: 300px;
			}
			
			.bar7 button {
				background: none;
				top: -2px;
				right: 0;
			}
			
			.bar7 button:before {
				content: "\f002";
				font-family: FontAwesome;
				color: #324b4e;
			}
			/*搜索框8*/
			
			.bar8 {
				background: #B46381;
			}
			
			.bar8 form {
				height: 42px;
			}
			
			.bar8 input {
				width: 0;
				padding: 0 42px 0 15px;
				border-bottom: 2px solid transparent;
				background: transparent;
				transition: .3s linear;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 2;
			}
			
			.bar8 input:focus {
				width: 300px;
				z-index: 1;
				border-bottom: 2px solid #F9F0DA;
			}
			
			.bar8 button {
				background: #683B4D;
				top: 0;
				right: 0;
			}
			
			.bar8 button:before {
				content: "\f002";
				font-family: FontAwesome;
				font-size: 16px;
				color: #F9F0DA;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div class="search bar1">
				<form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form>
			</div>
			<div class="search bar2">
				<form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form>
			</div>
			<div class="search bar3">
				<form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form>
			</div>
			<div class="search bar4">
				<form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form>
			</div>
			<div class="search bar5">
				<form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form>
			</div>
			<div class="search bar6">
				<form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form>
			</div>
			<div class="search bar7">
				<form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form>
			</div>
			<div class="search bar8">
				<form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form>
			</div>
		</div>
	</body>

</html>
原文链接：http://www.qdfuns.com/notes/39965/0debdbcd148abc3ad874bba106cc67f4.html
作者：桐山一
猜你喜欢
