jQuery和CSS3多步骤形式的表单

我们将创建一个基于jQuery的多步骤的表单界面进度条指示当前步骤。1。包括jQuery javascript库的页面。2。包括jQuery宽松政策宽松政策功能的插件。3。插件将转换 fieldset成一个多步骤的形式。Step 1Step 2Step 3Step 1This is step 1Step 2Your presence on the social networktwitter" placeholder="Twitter" />Facebook" />Step 3We will never sell it4。CSS样式表单。/*form styles*/#msform {width: 400px;margin: 50px auto;text-align: center;position: relative;}#msform fieldset {background: white;border: 0 none;border-radius: 3px;box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);padding: 20px 30px;box-sizing: border-box;width: 80%;margin: 0 10%;/*stacking fieldsets above each other*/position: absolute;}/*Hide all except first fieldset*/#msform fieldset:not(:first-of-type) {display: none;}/*inputs*/#msform input, #msform textarea {padding: 15px;border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;width: 100%;box-sizing: border-box;font-family: montserrat;color: #2C3E50;font-size: 13px;}/*buttons*/#msform .action-button {width: 100px;background: #27AE60;font-weight: bold;color: white;border: 0 none;border-radius: 1px;cursor: pointer;padding: 10px 5px;margin: 10px 5px;}#msform .action-button:hover, #msform .action-button:focus {box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;}/*headings*/.fs-title {font-size: 15px;text-transform: uppercase;color: #2C3E50;margin-bottom: 10px;}.fs-subtitle {font-weight: normal;font-size: 13px;color: #666;margin-bottom: 20px;}/*progressbar*/#progressbar {margin-bottom: 30px;overflow: hidden;/*CSS counters to number the steps*/counter-reset: step;}#progressbar li {list-style-type: none;color: white;text-transform: uppercase;font-size: 9px;width: 33.33%;float: left;position: relative;}#progressbar li:before {content: counter(step);counter-increment: step;width: 20px;line-height: 20px;display: block;font-size: 10px;color: #333;background: white;border-radius: 3px;margin: 0 auto 5px auto;}/*progressbar connectors*/#progressbar li:after {content: '';width: 100%;height: 2px;background: white;position: absolute;left: -50%;top: 9px;z-index: -1; /*put it behind the numbers*/}#progressbar li:first-child:after {/*connector not needed before the first step*/content: none;}/*marking active/completed steps green*//*The number of the step and the connector before it = green*/#progressbar li.active:before, #progressbar li.active:after {background: #27AE60;color: white;}5。javascript。

在线演示        积分下载        6毛下载        砍两刀下载