以下是 HTML5 SVG表单浮动标签特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh" class="no-js">
<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>HTML5 SVG表单浮动标签特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/set2.css" />
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<section class="htmleaf-content bgcolor-3">
<h2>Manami</h2>
<span class="input input--manami">
<input class="input__field input__field--manami" type="text" id="input-32" />
<label class="input__label input__label--manami" for="input-32">
<span class="input__label-content input__label-content--manami">Username</span>
</label>
</span>
<span class="input input--manami">
<input class="input__field input__field--manami" type="text" id="input-33" />
<label class="input__label input__label--manami" for="input-33">
<span class="input__label-content input__label-content--manami">Website</span>
</label>
</span>
<span class="input input--manami">
<input class="input__field input__field--manami" type="text" id="input-34" />
<label class="input__label input__label--manami" for="input-34">
<span class="input__label-content input__label-content--manami">Invitation Code</span>
</label>
</span>
</section>
<section class="htmleaf-content bgcolor-7">
<h2>Nariko</h2>
<span class="input input--nariko">
<input class="input__field input__field--nariko" type="text" id="input-20" />
<label class="input__label input__label--nariko" for="input-20">
<span class="input__label-content input__label-content--nariko">Username</span>
</label>
</span>
<span class="input input--nariko">
<input class="input__field input__field--nariko" type="text" id="input-21" />
<label class="input__label input__label--nariko" for="input-21">
<span class="input__label-content input__label-content--nariko">Website</span>
</label>
</span>
<span class="input input--nariko">
<input class="input__field input__field--nariko" type="text" id="input-22" />
<label class="input__label input__label--nariko" for="input-22">
<span class="input__label-content input__label-content--nariko">Invitation Code</span>
</label>
</span>
</section>
<section class="htmleaf-content bgcolor-1">
<h2>Nao</h2>
<span class="input input--nao">
<input class="input__field input__field--nao" type="text" id="input-1" />
<label class="input__label input__label--nao" for="input-1">
<span class="input__label-content input__label-content--nao">Username</span>
</label>
<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
<span class="input input--nao">
<input class="input__field input__field--nao" type="text" id="input-2" />
<label class="input__label input__label--nao" for="input-2">
<span class="input__label-content input__label-content--nao">Email</span>
</label>
<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
<span class="input input--nao">
<input class="input__field input__field--nao" type="text" id="input-3" />
<label class="input__label input__label--nao" for="input-3">
<span class="input__label-content input__label-content--nao">Invitation Code</span>
</label>
<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
</section>
<section class="htmleaf-content">
<h2>Yoshiko</h2>
<span class="input input--yoshiko">
<input class="input__field input__field--yoshiko" type="text" id="input-10" />
<label class="input__label input__label--yoshiko" for="input-10">
<span class="input__label-content input__label-content--yoshiko" data-content="Bird's Color">Bird's Color</span>
</label>
</span>
<span class="input input--yoshiko">
<input class="input__field input__field--yoshiko" type="text" id="input-11" />
<label class="input__label input__label--yoshiko" for="input-11">
<span class="input__label-content input__label-content--yoshiko" data-content="Wing Span">Wing Span</span>
</label>
</span>
<span class="input input--yoshiko">
<input class="input__field input__field--yoshiko" type="text" id="input-12" />
<label class="input__label input__label--yoshiko" for="input-12">
<span class="input__label-content input__label-content--yoshiko" data-content="Beak Length">Beak Length</span>
</label>
</span>
</section>
<section class="htmleaf-content bgcolor-10">
<h2>Shoko</h2>
<span class="input input--shoko">
<input class="input__field input__field--shoko" type="text" id="input-4" />
<label class="input__label input__label--shoko" for="input-4">
<span class="input__label-content input__label-content--shoko">Player Name</span>
</label>
<svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
<path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
<span class="input input--shoko">
<input class="input__field input__field--shoko" type="text" id="input-5" />
<label class="input__label input__label--shoko" for="input-5">
<span class="input__label-content input__label-content--shoko">Village</span>
</label>
<svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
<path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
<span class="input input--shoko">
<input class="input__field input__field--shoko" type="text" id="input-6" />
<label class="input__label input__label--shoko" for="input-6">
<span class="input__label-content input__label-content--shoko">World</span>
</label>
<svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
<path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
</section>
<section class="htmleaf-content bgcolor-4">
<h2>Chisato</h2>
<span class="input input--chisato">
<input class="input__field input__field--chisato" type="text" id="input-13" />
<label class="input__label input__label--chisato" for="input-13">
<span class="input__label-content input__label-content--chisato" data-content="First Name">First Name</span>
</label>
</span>
<span class="input input--chisato">
<input class="input__field input__field--chisato" type="text" id="input-14" />
<label class="input__label input__label--chisato" for="input-14">
<span class="input__label-content input__label-content--chisato" data-content="Middle Name">Middle Name</span>
</label>
</span>
<span class="input input--chisato">
<input class="input__field input__field--chisato" type="text" id="input-15" />
<label class="input__label input__label--chisato" for="input-15">
<span class="input__label-content input__label-content--chisato" data-content="Last Name">Last Name</span>
</label>
</span>
</section>
<section class="htmleaf-content bgcolor-3">
<h2>Makiko</h2>
<span class="input input--makiko">
<input class="input__field input__field--makiko" type="text" id="input-16" />
<label class="input__label input__label--makiko" for="input-16">
<span class="input__label-content input__label-content--makiko">Search</span>
</label>
</span>
</section>
<section class="htmleaf-content bgcolor-9">
<h2>Sae</h2>
<span class="input input--sae">
<input class="input__field input__field--sae" type="text" id="input-17" />
<label class="input__label input__label--sae" for="input-17">
<i class="fa fa-fw fa-pencil icon icon--sae"></i>
<span class="input__label-content input__label-content--sae">Email Address</span>
</label>
</span>
<span class="input input--sae">
<input class="input__field input__field--sae" type="text" id="input-18" />
<label class="input__label input__label--sae" for="input-18">
<i class="fa fa-fw fa-pencil icon icon--sae"></i>
<span class="input__label-content input__label-content--sae">Invitation Code</span>
</label>
</span>
<span class="input input--sae">
<input class="input__field input__field--sae" type="text" id="input-19" />
<label class="input__label input__label--sae" for="input-19">
<i class="fa fa-fw fa-pencil icon icon--sae"></i>
<span class="input__label-content input__label-content--sae">Full Name</span>
</label>
</span>
</section>
<section class="htmleaf-content bgcolor-4">
<h2>Kozakura</h2>
<span class="input input--kozakura">
<input class="input__field input__field--kozakura" type="text" id="input-7" />
<label class="input__label input__label--kozakura" for="input-7">
<span class="input__label-content input__label-content--kozakura" data-content="Name">Name</span>
</label>
<svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
</svg>
</span>
<span class="input input--kozakura">
<input class="input__field input__field--kozakura" type="text" id="input-8" />
<label class="input__label input__label--kozakura" for="input-8">
<span class="input__label-content input__label-content--kozakura" data-content="Email">Email</span>
</label>
<svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
</svg>
</span>
<span class="input input--kozakura">
<input class="input__field input__field--kozakura" type="text" id="input-9" />
<label class="input__label input__label--kozakura" for="input-9">
<span class="input__label-content input__label-content--kozakura" data-content="Website">Website</span>
</label>
<svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
</svg>
</span>
</section>
<section class="htmleaf-content bgcolor-1">
<h2>Fumi</h2>
<span class="input input--fumi">
<input class="input__field input__field--fumi" type="text" id="input-23" />
<label class="input__label input__label--fumi" for="input-23">
<i class="fa fa-fw fa-university icon icon--fumi"></i>
<span class="input__label-content input__label-content--fumi">Course Name</span>
</label>
</span>
<span class="input input--fumi">
<input class="input__field input__field--fumi" type="text" id="input-24" />
<label class="input__label input__label--fumi" for="input-24">
<i class="fa fa-fw fa-graduation-cap icon icon--fumi"></i>
<span class="input__label-content input__label-content--fumi">Degree</span>
</label>
</span>
<span class="input input--fumi">
<input class="input__field input__field--fumi" type="text" id="input-25" />
<label class="input__label input__label--fumi" for="input-25">
<i class="fa fa-fw fa-suitcase icon icon--fumi"></i>
<span class="input__label-content input__label-content--fumi">Work Place</span>
</label>
</span>
</section>
<section class="htmleaf-content bgcolor-4">
<h2>Ruri</h2>
<span class="input input--ruri">
<input class="input__field input__field--ruri" type="text" id="input-26" />
<label class="input__label input__label--ruri" for="input-26">
<span class="input__label-content input__label-content--ruri">Username</span>
</label>
</span>
<span class="input input--ruri">
<input class="input__field input__field--ruri" type="text" id="input-27" />
<label class="input__label input__label--ruri" for="input-27">
<span class="input__label-content input__label-content--ruri">Website</span>
</label>
</span>
<span class="input input--ruri">
<input class="input__field input__field--ruri" type="text" id="input-28" />
<label class="input__label input__label--ruri" for="input-28">
<span class="input__label-content input__label-content--ruri">Invitation Code</span>
</label>
</span>
</section>
<section class="htmleaf-content bgcolor-3">
<h2>Kohana</h2>
<span class="input input--kohana">
<input class="input__field input__field--kohana" type="text" id="input-29" />
<label class="input__label input__label--kohana" for="input-29">
<i class="fa fa-fw fa-clock-o icon icon--kohana"></i>
<span class="input__label-content input__label-content--kohana">Time</span>
</label>
</span>
<span class="input input--kohana">
<input class="input__field input__field--kohana" type="text" id="input-30" />
<label class="input__label input__label--kohana" for="input-30">
<i class="fa fa-fw fa-bus icon icon--kohana"></i>
<span class="input__label-content input__label-content--kohana">Line</span>
</label>
</span>
<span class="input input--kohana">
<input class="input__field input__field--kohana" type="text" id="input-31" />
<label class="input__label input__label--kohana" for="input-31">
<i class="fa fa-fw fa-phone icon icon--kohana"></i>
<span class="input__label-content input__label-content--kohana">Phone</span>
</label>
</span>
</section>
</div>
<script src="js/classie.js"></script>
<script>
(function () {
if (!String.prototype.trim) {
(function () {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function () {
return this.replace(rtrim, '');
};
})();
}
[ ].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
// in case the input is already filled..
if (inputEl.value.trim() !== '') {
classie.add(inputEl.parentNode, 'input--filled');
}
// events:
inputEl.addEventListener('focus', onInputFocus);
inputEl.addEventListener('blur', onInputBlur);
});
function onInputFocus(ev) {
classie.add(ev.target.parentNode, 'input--filled');
}
function onInputBlur(ev) {
if (ev.target.value.trim() === '') {
classie.remove(ev.target.parentNode, 'input--filled');
}
}
})();
</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):
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:'Raleway',Arial,sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{font-size:150%;padding:1em 0;}
.htmleaf-content h2{margin:0 0 2em;opacity:0.1;}
.htmleaf-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
.bgcolor-4{background:#2f3238;color:#fff;}
.bgcolor-5{background:#df6659;color:#521e18;}
.bgcolor-6{background:#2fa8ec;color:#fff;}
.bgcolor-7{background:#d0d6d6;}
.bgcolor-8{background:#3d4444;color:#fff;}
.bgcolor-9{background:#8781bd;color:#fff;}
.bgcolor-10{background:#6C6C6C;}
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
body .nomargin-bottom{margin-bottom:0;}
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}
CSS代码(normalize.css):
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
分享到QQ
分享到微博
微信扫一扫
