CSS3 to make a step-up registration form

This demo is a single step registration form made with CSS3, each input corresponds to each step, and the corresponding step changes when the form gets focus. However, this effect is implemented using JS code, but the appearance of the entire form is done by CSS3, the whole case used: @font-face to make icon icons, using gradient to create a gradient button effect, using Text-shadow to create text shadow effect, etc. , convenient and simple point, but the details and creativity is the most important, like the students can see how the realization of it
1. [File] index.html
<! DOCTYPE html>
<meta charset= "UTF-8" >
&LT;TITLE&GT;CSS3 making a step-by-step registration Form |w3cplus</title>
<meta name= "keywords" content= "CSS3 Learning, CSS3 attribute detailed, CSS3 transition, how to learn CSS3" >
<meta name= "description" content= "W3cplus is a front-end enthusiast's home, w3cplus efforts to create the best web front-end learning site. W3cplus strive to be original, to study together, progress together and share as the principle. W3cplus Station provides technical documentation, DEMO, and resources for css,css3,html,html5,jquery, mobile phone, and share with front-end enthusiasts. ">
<link rel= "shortcut icon" href= "Http://www.w3cplus.com/sites/all/themes/marvin/favicon.ico" >
<link rel= "stylesheet" type= "Text/css" href= "Http://www.w3cplus.com/demo/css3/base.css" media= "All"/>
<style type= "Text/css" >
body{
Background: #1e1f20;
font-size:18px;
}
. login{
width:330px;
margin:40px Auto 0;
Text-align:center;
}
. Login h2{
Font:italic 32px/40px "Impact";
letter-spacing:1px;
Color:rgba (0,0,0,0);
Background:-webkit-linear-gradient (top, #ffcf6b, #ffc54c 10%, #ffb320 40%, #c16e05);
Background:-moz-linear-gradient (top, #ffcf6b, #ffc54c 10%, #ffb320 40%, #c16e05);
Background:linear-gradient (Top, #ffcf6b, #ffc54c 10%, #ffb320 40%, #c16e05);
-webkit-background-clip:text;
/*-WEBKIT-TEXT-STROKE:2PX #000; * *
}
. Login p{
Color: #070606;
font-size:28px;
Font-style:italic;
Font-weight:bold;
text-shadow:1px 1px 0 Rgba (255,255,255,.2), -1px-1px 0 rgba (255,255,255,.2);
}
. control-round{
position:relative;
List-style:none;
height:5px;
border:1px solid #222222;
Background: #101010;
margin:50px 0 40px;
}
. Control-round label{
Position:absolute;
top:-18px;
font-family: "Impact";
width:36px;
Color: #151515;
line-height:36px;
text-shadow:-1px-1px 1px #666, 1px 1px 1px #666;
border-radius:18px;
border:1px solid #686868;
box-shadow:0 0 2px 2px Rgba (0,0,0,.2);
Background:-webkit-linear-gradient (Top, #656565, #393939);
Background:-moz-linear-gradient (Top, #656565, #393939);
Background:linear-gradient (Top, #656565, #393939);
}
. Control-round label.active{
text-shadow:0 1px 0 #f5b738;
border:1px solid #c4883b;
Background:-webkit-linear-gradient (Top, #f6ae1b, #b46001);
Background:-moz-linear-gradient (Top, #f6ae1b, #b46001);
Background:linear-gradient (Top, #f6ae1b, #b46001);
}
. Control-round Label.active:after,
. Control-round label.active:before{
Position:absolute;
Display:block;
Content: "";
Border-style:solid;
left:50%;
top:40px;
}
. Control-round label.active:after{
margin:5px 0 0-6px;
border-width:6px;
Border-color: #dc8e0f transparent transparent transparent;
Z-index:3;
}
. Control-round label.active:before{
margin:4px 0 0-7px;
border-width:7px;
Border-color: #000 transparent transparent transparent;
Z-index:2;
}
. Control-round Label:nth-child (1) {
left:0;
}
. Control-round Label:nth-child (2) {
left:50%;
margin-left:-18px;
}
. Control-round Label:nth-child (3) {
right:0;
}
. control-group{
position:relative;
margin:20px 0;
}
. control-group:after{
Position:absolute;
Display:block;
top:10px;
left:12px;
width:25px;
Color:rgba (255,255,255,.6);
Text-align:center;
font-size:16px;
Content: "\21";
font-family: ' Icomoon ';
Font-style:normal;
Speak:none;
Font-weight:normal;
-webkit-font-smoothing:antialiased;
}
. Control-group:nth-child (2): after{
Content: "\22";
}
. Control-group input{
padding-left:40px;
width:100%;
height:44px;
border-radius:22px;
border:1px solid #2b2b2b;
Box-shadow:inset 0 0 10px Rgba (0,0,0,1);
Background: #151515;
-webkit-transition:border linear 0.2s, Box-shadow linear 0.2s;
-moz-transition:border linear 0.2s, Box-shadow linear 0.2s;
-o-transition:border linear 0.2s, Box-shadow linear 0.2s;
-ms-transition:border linear 0.2s, Box-shadow linear 0.2s;
Transition:border linear 0.2s, Box-shadow linear 0.2s;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
Box-sizing:border-box;
}?http://www.huiyi8.com/huodong/?
. Control-group input:focus{
Box-shadow:inset 0 1px 3px rgba (255,255,255,0.1), 0 0 8px Rgba (255,255,255, 0.6);
} Activity Summary Papers
. form-actions{
Text-align:right;
}
. form-actions. btn{
position:relative;
padding:0 20px;
margin-left:5px;
height:35px;
line-height:35px;
Color: #000;
text-shadow:0 1px 0 #7f7f7f;
border-radius:17px;
border:1px solid #4f4f4f;
box-shadow:0 0 3px #000;
Background:-webkit-linear-gradient (Top, #666666, #414141);
Background:-moz-linear-gradient (Top, #666666, #414141);
Background:linear-gradient (Top, #666666, #414141);
}
. form-actions. btn:hover{
Background:-webkit-linear-gradient (Top, #757575, #4e4e4e);
Background:-moz-linear-gradient (Top, #757575, #4e4e4e);
Background:linear-gradient (Top, #757575, #4e4e4e);
}
. form-actions. btn:active{
top:1px;
border:1px solid #111;
box-shadow:0 1px 1px #111 inset;
Background:-webkit-linear-gradient (Top, #4e4e4e, #4e4e4e);
Background:-moz-linear-gradient (Top, #4e4e4e, #4e4e4e);
Background:linear-gradient (Top, #4e4e4e, #4e4e4e);
}
. form-actions. btn[type=submit]{
border:1px solid #c36e0e;
text-shadow:0 1px 0 #f4a922;
Background:-webkit-linear-gradient (Top, #f6ab15, #b46001);
Background:-moz-linear-gradient (Top, #f6ab15, #b46001);
Background:linear-gradient (Top, #f6ab15, #b46001);
}
. form-actions. btn[type=submit]:hover{
Background:-webkit-linear-gradient (Top, #ffc145, #c26905);
Background:-moz-linear-gradient (Top, #ffc145, #c26905);
Background:linear-gradient (Top, #ffc145, #c26905);
}
. form-actions. btn[type=submit]:active{
border:1px solid #492700;
box-shadow:0 1px 2px #492700 inset;
Background:-webkit-linear-gradient (Top, #c16e05, #c16e05);
Background:-moz-linear-gradient (Top, #c16e05, #c16e05);
Background:linear-gradient (Top, #c16e05, #c16e05);
}
@font-face {
font-family: ' Icomoon ';
Src:url (' Fonts/icomoon.eot ');
Src:url (' Fonts/icomoon.eot #iefix ') format (' Embedded-opentype '),
URL (' fonts/icomoon.svg#icomoon ') format (' SVG '),
URL (' fonts/icomoon.woff ') format (' Woff '),
URL (' Fonts/icomoon.ttf ') format (' TrueType ');
Font-weight:normal;
Font-style:normal;
}
</style>
<script type= "Text/javascript" >
Window.onload=function () {
var Oform=document.getelementbyid (' Form-control ');
var alabel=oform.getelementsbytagname (' label ');
var ainput=oform.getelementsbytagname (' input ')

for (Var i=0;i<alabel.length;i++) {
Ainput[i].index=i;
Alabel[i].onclick=function () {
for (Var i=0;i<alabel.length;i++) {
Alabel[i].classname= ";
}
This.classname= ' active ';
}
Ainput[i].onclick=function () {
for (Var i=0;i<alabel.length;i++) {
Alabel[i].classname= ";
}
Alabel[this.index].classname= ' active ';
}
}
}
</script>
<body>
<div class= "Wrap_top_nav" >
<nav id= "Top_nav" >
<ul class= "Inline-style clearfix" >
<li><a href= "http://www.w3cplus.com" target= "_blank" >w3cplus</a></li>
<li><a href= "http://www.w3cplus.com/resources/css3-tutorial-and-case" target= "_blank" >css3 detailed tutorial </a ></li>
<li><a href= "http://www.w3cplus.com/demos/list.html" target= "_blank" &GT;CSS3 instances </a></li>
<li><a href= "http://www.w3cplus.com/demo/tags/242.html" target= "_blank" > Toto daily Practice </a></li>
</ul>
<a id= "read" href= "http://www.w3cplus.com/demo/sign-up-form.html" target= "_blank" > View original Text >></a>
</nav>
</div>
<div class= "Page" >
&LT;HGROUNP class= "White" >
&LT;H1&GT;CSS3 making step-by-stage registration Form <section class= "Demo" >

<div class= "Login" class= "Clearfix" >
<p>with steps</p>
<form method= "POST" action= "id=" Form-control ">
<div class= "Control-round" id= "Control-round" >
<label for= "Email" class= "active" >1</label>
<label for= "Password" >2</label>
<label for= "Vpassword" >3</label>
</div>
<div class= "Control-group" >
<input type= "text" name= "loginName" id= "email" placeholder= "email Address" >
</div>
<div class= "Control-group" >
<input type= "text" name= "loginName" id= "password" placeholder= "password" >
</div>
<div class= "Control-group" >
<input type= "text" name= "LoginName" id= "Vpassword" placeholder= "Verify Password" >
</div>
<div class= "Form-actions" >
<button class= "BTN" type= "Submit" >sign up</button>
<button class= "btn" type= "button" >Clear</button>
</div>
</form>
</div>

</section>
</div>
</body>

CSS3 to make a step-up registration form