<span style="font-size:24px;">當input獲取焦點時，input中的文字就會跑到input的上邊，開始輸入文字時，上邊的文字會發生變化。原理用的是label和input。具體代碼如下：</span>
<span style="font-size:14px;"><img src="https://img-blog.csdn.net/20150814115113256?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="225" height="300" alt="" />
</span>
<span style="font-size:14px;">html:</span>
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>登錄界面</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="formes" style="overflow: hidden;">
<!--<nav id="gooey-h" style="position: absolute;z-index: 9999;">
<input type="checkbox" class="menu-open" name="menu-open2" id="menu-open2"/>
<label class="open-button" for="menu-open2">
<span class="burger burger-1"></span>
<span class="burger burger-2"></span>
<span class="burger burger-3"></span>
</label>
<a href="#" class="gooey-menu-item"> <i class="fa fa-train"></i> </a>
<a href="#" class="gooey-menu-item"> <i class="fa fa-bicycle"></i> </a>
<a href="#" class="gooey-menu-item"> <i class="fa fa-rocket"></i> </a>
<a href="#" class="gooey-menu-item"> <i class="fa fa-automobile"></i> </a>
</nav> -->
<h2>登錄界面</h2>
<table>
<tr>
<td>
<input type="text" required="" />
<label alt="請輸入用戶名" placeholder="用戶名"></label>
</td>
</tr>
<tr>
<td>
<input type="password" required="" />
<label alt="請輸入密碼" placeholder="密碼"></label>
</td>
</tr>
<tr>
<td>
<div class="squaredTwo">
<input type="checkbox" value="None" id="squaredTwo" name="check" checked />
<label for="squaredTwo"></label>
</div>
<span class="jzmm">記住密碼</span>
<span class="wjmm"><a href="#">忘記密碼？</a></span>
</td>
</tr>
<tr>
<td>
<input type="button" value="登錄" class="btn"/>
</td>
</tr>
</table>
</div>
</body>
</html>
</span>
<span style="font-size:14px;">css:</span>
<pre name="code" class="html"><span style="font-size:14px;">body{padding: 0;margin: 0;margin-top: -25px;display:block;height:100%;background-image: url(../images/1.jpg);/*background-repeat: no-repeat;*/background-size: 100% 100%;font-family: "微軟雅黑";}
div.formes{width:100%;max-width: 640px;margin: auto;}
div.formes h2{color: #eee;font-size: 30px;text-align: center;padding: 90px 0 0px 0;-webkit-font-smoothing: antialiased;text-shadow: 0px 2px 5px black;font-weight: 400;}
div.formes table{width: 80%;margin: auto;}
div.formes table tr td{height: 4em;}
div.formes table tr td span.jzmm{line-height: 28px;color: #eee;padding-left: 10px;text-shadow: 0px 2px 3px #000;}
div.formes table tr td span.wjmm{float:right;padding-right:20px;line-height: 28px;padding-left: 10px;text-shadow: 0px 2px 3px #000;}
div.formes table tr td span.wjmm a{color: #eee;}
div.formes table tr td input.btn{
font-family: "微軟雅黑";
border: 0;
width: 100%;
height: 44px;
font-size: 20px;
color: #eee;
text-shadow: 0px 3px 6px #000;
border-radius: 14px;
background: #fcfff4;
background: -moz-linear-gradient(top, #fee 0%, #faa 40%, #f66 100%);
background: -webkit-linear-gradient(top, #fee 0%, #faa 40%, #f66 100%);
background: linear-gradient(to bottom, #fee 0%, #faa 40%, #f66 100%);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
/*input.text*/
input[type="text"],input[type="password"]{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: -webkit-calc(3em + 2px);
height: calc(3em + 2px);
margin: 0 0 1em;
padding: 1em;
border: 1px solid #cccccc;
border-radius: 1em;
background: #fff;
resize: none;
outline: none;
font-size: 14px;
color: #666;
}
input[type="text"][required]:focus,input[type="password"][required]:focus {
border-color: #faa/*00bafa*/;
}
input[type="text"][required]:focus + label[placeholder]:before,input[type="password"][required]:focus + label[placeholder]:before {
color: #faa/*00bafa*/;
background: #fff;
padding: 0 10px;
border-radius: 10px;
border-color:#faa ;
}
input[type="text"][required]:focus + label[placeholder]:before,
input[type="text"][required]:valid + label[placeholder]:before,input[type="password"][required]:focus + label[placeholder]:before,
input[type="password"][required]:valid + label[placeholder]:before {
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
-ms-transform: translate(0, -1.5em) scale(0.9, 0.9);
transform: translate(0, -1.5em) scale(0.9, 0.9);
}
input[type="text"][required]:invalid + label[placeholder][alt]:before,input[type="password"][required]:invalid + label[placeholder][alt]:before {
content: attr(alt);
}
input[type="text"][required] + label[placeholder],input[type="password"][required] + label[placeholder] {
display: block;
pointer-events: none;
line-height: 2em;
margin-top: -webkit-calc(-3em - 2px);
margin-top: calc(-3em - 2px);
margin-bottom: -webkit-calc((3em - 1em) + 2px);
margin-bottom: calc((3em - 1em) + 2px);
}
input[type="text"][required] + label[placeholder]:before,input[type="password"][required] + label[placeholder]:before {
content: attr(placeholder);
display: inline-block;
margin: 0 -webkit-calc(1em + 2px);
margin: 0 calc(1em + 2px);
padding: 0 10px;
color: #898989;
border-radius: 10px;
border-color: #898989;
background: #fff;
white-space: nowrap;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
/*background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
background-image: linear-gradient(to bottom, #ffffff, #ffffff);
-webkit-background-size: 100% 5px;
background-size: 100% 5px;
background-repeat: no-repeat;
background-position: center;*/
}
/*input.checkbox*/
.squaredTwo {
width: 28px;
height: 28px;
position: relative;
float: left;
/*margin: 20px auto;*/
margin-left: 20px;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.squaredTwo label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
left: 4px;
top: 4px;
background: -moz-linear-gradient(top, #f66 0%, #fcc 100%);
background: -webkit-linear-gradient(top, #f66 0%, #fcc 100%);
background: linear-gradient(to bottom, #f66 0%, #fcc 100%);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.squaredTwo label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredTwo label:hover::after {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
.squaredTwo input[type=checkbox] {
visibility: hidden;
}
.squaredTwo input[type=checkbox]:checked + label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}</span>
