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;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值