html多步骤页面,HTML5多步骤注册表单模板

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

input,

button,

textarea {

font-family: "Cabin", sans-serif;

}

body {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

padding: 20px;

font-family: "Cabin", sans-serif;

}

.wrapper {

width: 100%;

max-width: 960px;

margin: auto;

}

.wrapper form .form-section {

widtH: 100%;

box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.35);

display: none;

}

.wrapper form .form-section:first-child {

display: block;

}

.wrapper form .form-section header {

padding: 10px 40px;

background: #df405a;

color: white;

}

.wrapper form .form-section header p {

font-weight: bold;

}

.wrapper form .form-section .inputs {

padding: 40px;

}

.wrapper form .form-section .inputs.center {

margin: 0 auto;

text-align: center;

}

.wrapper form .form-section .inputs.center .field,

.wrapper form .form-section .inputs.center button.next {

margin: 0 auto;

}

.wrapper form .form-section .inputs button.next,

.wrapper form .form-section .inputs button.prev,

.wrapper form .form-section .inputs button.fin {

padding: 20px 60px;

border: none;

outline: none;

color: white;

background: #df405a;

transition: 0.15s ease-in-out;

}

.wrapper form .form-section .inputs button.next:disabled,

.wrapper form .form-section .inputs button.prev:disabled,

.wrapper form .form-section .inputs button.fin:disabled {

background: #aaa;

}

.wrapper form .form-section .inputs button.next:disabled:hover,

.wrapper form .form-section .inputs button.prev:disabled:hover,

.wrapper form .form-section .inputs button.fin:disabled:hover {

background: #999;

}

.wrapper form .form-section .inputs button.next:hover,

.wrapper form .form-section .inputs button.prev:hover,

.wrapper form .form-section .inputs button.fin:hover {

background: #ca223d;

}

.wrapper form .form-section .inputs .field label.avatarUpload {

color: #df405a;

font-size: 50px;

margin: 0px 0px 20px 0px;

width: 250px;

height: 250px;

border-radius: 50%;

border: 1px solid #df405a;

text-align: center;

line-height: 250px;

transition: 0.15s ease-in-out;

}

.wrapper form .form-section .inputs .field label.avatarUpload.center {

margin: 0px auto 20px auto;

}

.wrapper form .form-section .inputs .field label.avatarUpload:hover {

color: white;

background: #df405a;

}

.wrapper form .form-section .inputs .field label.avatarUpload.active {

background: #77EB63;

color: white;

border: 1px solid #77EB63;

}

.wrapper form .form-section .inputs .field input,

.wrapper form .form-section .inputs .field label,

.wrapper form .form-section .inputs .field textarea {

display: block;

margin: 10px 0;

width: 100%;

}

.wrapper form .form-section .inputs .field input[type='text'],

.wrapper form .form-section .inputs .field input[type='email'],

.wrapper form .form-section .inputs .field input[type='password'],

.wrapper form .form-section .inputs .field textarea {

padding: 10px 5px;

border: none;

border-bottom: 1px solid #df405a;

outline: 0;

transition: 0.15s ease-in-out;

}

.wrapper form .form-section .inputs .field input[type='text']:focus,

.wrapper form .form-section .inputs .field input[type='email']:focus,

.wrapper form .form-section .inputs .field input[type='password']:focus,

.wrapper form .form-section .inputs .field textarea:focus {

box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.35);

}

.wrapper form .form-section .inputs .field textarea {

width: 100%;

max-width: 100%;

min-heighT: 300px;

}