form有趣的登录效果（有趣的input，自定义的checkbox）

来源：互联网发布：小孩上网监控软件编辑：程序博客网时间：2024/06/05 11:21

<span style="font-size:24px;">当input获取焦点时，input中的文字就会跑到input的上边，开始输入文字时，上边的文字会发生变化。原理用的是label和input。具体代码如下：</span>

<span style="font-size:14px;"><img src="http://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>

0 0