CSS3响应式伸缩搜索框

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3响应式伸缩搜索框的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta http-equiv="Content-Type" content="text/html; 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>CSS3响应式伸缩搜索框</title>
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>CSS3响应式伸缩搜索框</h1>
			</header>
			<div class="main clearfix">
				<!-- Optional columns for small components -->
				<div class="column">
					<p>The search bar can be opened on click, it has a fluid 
					width and it&#39;s mobile-friendly.</p>
				</div>
				<div class="column">
					<div id="sb-search" class="sb-search">
						<form>
							<input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="search" id="search">
							<input class="sb-search-submit" type="submit" value="">
							<span class="sb-icon-search"></span>
						</form>
					</div>
				</div>
			</div>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/uisearch.js"></script>
		<script>
			new UISearch( document.getElementById( 'sb-search' ) );
		</script>
	</body>
</html>

JS代码(classie.js):

/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo * * classie.has( elem,'my-class' ) -> true/false * classie.add( elem,'my-new-class' ) * classie.remove( elem,'my-unwanted-class' ) * classie.toggle( elem,'my-class' ) */
/*jshint browser:true,strict:true,undef:true */
/*global define:false */
( function( window ){
	'use strict';
	// class helper functions from bonzo https://github.com/ded/bonzofunction classReg( className ){
	return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management// altho to be fair,the api sucks because it won't accept multiple classes at oncevar hasClass,addClass,removeClass;
	if ( 'classList' in document.documentElement ){
	hasClass = function( elem,c ){
	return elem.classList.contains( c );
}
;
	addClass = function( elem,c ){
	elem.classList.add( c );
}
;
	removeClass = function( elem,c ){
	elem.classList.remove( c );
}
;
}
else{
	hasClass = function( elem,c ){
	return classReg( c ).test( elem.className );
}
;
	addClass = function( elem,c ){
	if ( !hasClass( elem,c ) ){
	elem.className = elem.className + ' ' + c;
}
}
;
	removeClass = function( elem,c ){
	elem.className = elem.className.replace( classReg( c ),' ' );
}
;
}
function toggleClass( elem,c ){
	var fn = hasClass( elem,c ) ? removeClass:addClass;
	fn( elem,c );
}
var classie ={
	// full names hasClass:hasClass,addClass:addClass,removeClass:removeClass,toggleClass:toggleClass,// short names has:hasClass,add:addClass,remove:removeClass,toggle:toggleClass}
;
	// transportif ( typeof define === 'function' && define.amd ){
	// AMD define( classie );
}
else{
	// browser global window.classie = classie;
}
}
)( window );

CSS代码(default.css):

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face{font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');font-weight:normal;font-style:normal;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body,html{font-size:100%;padding:0;margin:0;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-family:'Lato',Calibri,Arial,sans-serif;color:#eaeaea;background:#2c3e50;}
a{color:#b4c7da;text-decoration:none;}
a:hover,a:active{color:#fff;}
/* Header Style */
.main,.container > header{margin:0 auto;padding:2em;}
.container > header{text-align:center;background:rgba(0,0,0,0.01);}
.container > header h1{font-size:2.625em;line-height:1.3;margin:0;font-weight:300;}
.container > header span{display:block;font-size:60%;color:#e67e22;padding:0 0 0.6em 0.1em;}
/* Main Content */
.main{max-width:69em;}
.column{float:left;width:50%;padding:0 2em;min-height:300px;position:relative;}
.column:nth-child(2){box-shadow:-1px 0 0 rgba(0,0,0,0.1);}
.column p{font-weight:300;font-size:2em;padding:0;margin:0;text-align:right;line-height:1.5;}
.column a{border:3px solid #b4c7da;padding:0 15px;display:inline-block;margin:20px 0;}
.column a:hover{border-color:#fff;}
/* To Navigation Style */
.codrops-top{background:#566472;background:rgba(255,255,255,0.2);text-transform:uppercase;width:100%;font-size:0.69em;line-height:2.2;}
.codrops-top a{padding:0 1em;letter-spacing:0.1em;color:#fff;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.8);color:#2c3e50;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.codrops-icon:before{font-family:'codropsicons';margin:0 4px;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
@media screen and (max-width:46.0625em){.column{width:100%;min-width:auto;min-height:auto;padding:1em;}
.column p{text-align:left;font-size:1.5em;}
.column:nth-child(2){box-shadow:0 -1px 0 rgba(0,0,0,0.1);}
}
@media screen and (max-width:25em){.codrops-icon span{display:none;}
}

附件:下载该文件资源,减少时间成本(增值服务)