html表格导航栏翻页,CSS3 多页（多步骤/带步骤导航栏）表单模板

CSS

语言：

CSSSCSS

确定

.stages {

font-size: 0;

text-align: justify;

}

.stages:after {

content: '';

display: inline-block;

font-size: 0;

text-align: justify;

width: 100%;

}

input[type="radio"] {

display: none;

}

.stages label {

background: #fff;

border: solid 5px #c0c0c0;

border-radius: 50%;

cursor: pointer;

display: inline-block;

font-size: 0;

font-weight: 700;

height: 50px;

line-height: 50px;

position: relative;

text-align: center;

vertical-align: top;

width: 50px;

z-index: 1;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.stages label:after {

content: '\2713';

color: #0cc39f;

display: inline-block;

font-size: 16px;

}

#one:checked ~ .stages label[for="one"],

#two:checked ~ .stages label[for="two"],

#three:checked ~ .stages label[for="three"],

#four:checked ~ .stages label[for="four"],

#five:checked ~ .stages label[for="five"],

#six:checked ~ .stages label[for="six"] {

border-color: #0cc39f;

}

.stages label.active {

border-color: purple !important;

}

#one:checked ~ .stages label,

#two:checked ~ .stages label[for="one"] ~ label,

#three:checked ~ .stages label[for="two"] ~ label,

#four:checked ~ .stages label[for="three"] ~ label,

#five:checked ~ .stages label[for="four"] ~ label,

#six:checked ~ .stages label[for="five"] ~ label {

font-size: 1rem;

}

#one:checked ~ .stages label:after,

#two:checked ~ .stages label[for="one"] ~ label:after,

#three:checked ~ .stages label[for="two"] ~ label:after,

#four:checked ~ .stages label[for="three"] ~ label:after,

#five:checked ~ .stages label[for="four"] ~ label:after,

#six:checked ~ .stages label[for="five"] ~ label:after {

display: none;

}

.progress > span {

background: #c0c0c0;

display: inline-block;

height: 5px;

transform: translateY(-2.75em);

transition: 0.3s;

width: 0;

}

#two:checked ~ .progress span {

width: calc(100% / 5 * 1);

}

#three:checked ~ .progress span {

width: calc(100% / 5 * 2);

}

#four:checked ~ .progress span {

width: calc(100% / 5 * 3);

}

#five:checked ~ .progress span {

width: calc(100% / 5 * 4);

}

#six:checked ~ .progress span {

width: calc(100% / 5 * 5);

}

.panels div {

display: none;

}

#one:checked ~ .panels [data-panel="one"],

#two:checked ~ .panels [data-panel="two"],

#three:checked ~ .panels [data-panel="three"],

#four:checked ~ .panels [data-panel="four"],

#five:checked ~ .panels [data-panel="five"],

#six:checked ~ .panels [data-panel="six"] {

/* Custom code for the demo */

display: block;

}

html,

button,

input,

select,

textarea {

font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;

}

body {

background-color: #0cc39f;

margin: 0;

padding: 0 2em;

}

a {

color: #0cc39f;

}

h2,

h4 {

margin-top: 0;

}

.form {

background: #fff;

box-shadow: 0 5px 10px rgba(0, 0, 0, .4);

margin: 4em;

min-width: 480px;

padding: 1em;

}

.panels div {

border-top: solid 1px #c0c0c0;

margin: 1em 0 0;

padding: 1em 0 0;

}

input {

box-sizing: border-box;

display: block;

padding: 0.4em;

width: 100%;

}

button {

background-color: #0cc39f;

border: 0;

color: #fff;

cursor: pointer;

font-weight: 700;

margin: 1em 0 0 0;

padding: 1em;

}

button:hover {

opacity: 0.8;

}