8款好看的纯CSS3搜索框

ywhluck
ywhluck 发布于 2017-03-15 11:54:12 浏览:3588 类型:原创 - 随笔 分类:HTML/CSS - 静态效果 二维码: 作者原创 版权保护
效果图:
8款好看的纯CSS3搜索框
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<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">
	<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
		}

		/*搜索框8*/
		.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;
		}


		/*搜索框6*/
		.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, .bar8 button {
			background: transparent;
		}
		.bar8 input {
			border-bottom: 2px solid #F9F0DA;
			width: 300px;
			padding: 0 42px 0 15px;
			position: absolute;
			top: 0;
			right: 0;
		}
		.bar8 button {
			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>
标签:
z
给个赞 33 人点赞
收藏 90 人收藏
评论 已有 13 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
杜塞尔多夫
杜塞尔多夫2017-03-15 13:18:051F
挺好看的,受教了!
举报 支持 (1) 回复 (0)
最新评论
ywhluck
ywhluck6 天前13F
谢谢指正哈。我明白你说的了。我看了下,但是不知道应该怎么解决比较好。所以就先改成直接显示的那种了。请问你有什么方法吗? //@386151788:你的input定位都把提交给覆盖了 //@ywhluck:你点一下搜索按钮呀,就出来input框了 //@386151788:第八个写错了吧!!!怎么提交
举报 支持 (0) 回复 (0)
386151788
3861517887 天前12F
你的input定位都把提交给覆盖了 //@ywhluck:你点一下搜索按钮呀,就出来input框了 //@386151788:第八个写错了吧!!!怎么提交
举报 支持 (0) 回复 (1)
386151788
3861517887 天前11F
第八个和前边几个明显不同,第一、你点提交触摸没有手势标志,第二、你点提交前面有动静,第八个没有反应 //@ywhluck:你点一下搜索按钮呀,就出来input框了 //@386151788:第八个写错了吧!!!怎么提交
举报 支持 (0) 回复 (0)
386151788
3861517887 天前10F
你没明白我的意思,第八个输入文字之后,没办法提交 //@ywhluck:你点一下搜索按钮呀,就出来input框了 //@386151788:第八个写错了吧!!!怎么提交
举报 支持 (0) 回复 (0)
ywhluck
ywhluck2017-03-17 18:21:499F
你点一下搜索按钮呀,就出来input框了 //@386151788:第八个写错了吧!!!怎么提交
举报 支持 (0) 回复 (3)
386151788
3861517882017-03-17 15:56:018F
第八个写错了吧!!!怎么提交
举报 支持 (0) 回复 (1)
za336533
za3365332017-03-17 10:09:237F
还不错哦
举报 支持 (0) 回复 (0)
jieshuai
jieshuai2017-03-16 14:37:436F
妹子,抄的请注明出处啊
举报 支持 (0) 回复 (0)
ywhluck
ywhluck2017-03-16 11:50:435F
嗯嗯。就是不难。 //@oceanliu666:这个其实写着不难,但是关键是配色比较纠结了,看来很有审美啊
举报 支持 (0) 回复 (0)
oceanliu666
oceanliu6662017-03-16 10:28:264F
这个其实写着不难,但是关键是配色比较纠结了,看来很有审美啊
举报 支持 (0) 回复 (1)
ywhluck
ywhluck2017-03-16 10:17:133F
啊哈。就是的。emoticon //@前端一锅煮:自学成才吗?
举报 支持 (0) 回复 (0)
前端一锅煮
前端一锅煮2017-03-16 09:50:302F
自学成才吗?
举报 支持 (0) 回复 (1)
杜塞尔多夫
杜塞尔多夫2017-03-15 13:18:051F
挺好看的,受教了!
举报 支持 (1) 回复 (0)
ywhluck ywhluck 作者

成为更好的自己。

作者最新