自适应搜索框

原创 乐之屋  2018-02-05 20:57:21  阅读 142 次 评论 0 条

自适应搜索框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>自适应搜索表单</title>

<style type="text/css">
html {
	overflow-y: scroll;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	word-break: break-all
}
*,:after,:before {
	box-sizing: border-box
}
body,button,input,select,textarea {
	background: #f2f2f2;
	color: #444;
	font: 14px "Microsoft YaHei",Helvetica,Arial,Lucida Grande,Tahoma,sans-serif;
	line-height: 180%
}
button::-moz-focus-inner,input::-moz-focus-inner {
	padding: 0;
	border: none
}
a,button,input {
	-webkit-tap-highlight-color: rgba(255,0,0,0)
}
#searchform input,#searchformc input,#searchformsy input {
	float: left;
	padding: 2px 10px;
	width: 75%;
	height: 37px;
	border: 1px solid #ebebeb;
	border-radius: 2px 0 0 2px;
	background: #ebebeb;
	font: 14px "Microsoft YaHei",Helvetica;
	line-height: 37px;
	-webkit-appearance: none
}
#searchform input:focus,#searchformc input:focus,#searchformsy input:focus {
	outline: 0;
	background: #fff
}
#searchform button,#searchformc button,#searchformsy button {
	position: relative;
	overflow: visible;
	width: 25%;
	height: 37px;
	border: 0;
	border-radius: 0 2px 2px 0;
	background: #FD77B2;
	color: #fff;
	text-transform: uppercase;
	cursor: pointer
}
#searchform button:hover,#searchformc button:hover,#searchformsy button:hover {
	opacity: .6
}
</style>
		
<form id="searchform" name="search" method="post" action="http://5devip.com/">
	<input type="text" name="q" placeholder="输入搜索内容"> 
	<button type="submit" id="searchsubmit">搜索</button>
	</form>





</body>
</html>
</html>

1517835612754709.jpg

本文地址:http://5devip.com/?id=28
版权声明:本文为原创文章,版权归 乐之屋 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?