文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >HTML多步表单在移动设备上不起作用

问HTML多步表单在移动设备上不起作用
EN

Stack Overflow用户
提问于 2021-08-26 14:39:39
回答 2查看 54关注 0票数 0

我有一个多步骤表单，但多步骤在移动设备上不起作用，它一次显示所有步骤，甚至显示成功消息。

如果可能的话，请帮助我

代码语言：javascript
复制
The HTML-CSS and javascript code I got it from here: 

 https://codepen.io/TyStelmach/pen/yNxMeJ


---

The HTML Code

代码语言：javascript
复制
<meta charset="utf-8">

integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T“crossorigin=”匿名“>

代码语言：javascript
复制
  <script src=
代码语言：javascript
复制
"https://code.jquery.com/jquery-3.2.1.min.js">

"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js“

代码语言：javascript
复制
type="text/javascript">

"">https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

代码语言：javascript
复制
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
代码语言：javascript
复制
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
代码语言：javascript
复制
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>

代码语言：javascript
复制
Made with
代码语言：javascript
复制
<i class="fa fa-beer"></i>
代码语言：javascript
复制
by
代码语言：javascript
复制
<a href="http://www.aaa-wa.com">AAA Web Agency</a>
代码语言：javascript
复制
<div class="spoilers">

需要符合TCPA的“联系许可”语言

代码语言：javascript
复制
<h2 class="fs-title">Score Index</h2>
代码语言：javascript
复制
<h3 class="fs-subtitle">Getting the most out of your data</h3>
代码语言：javascript
复制
<p>Your data has been successfully submited</p>
代码语言：javascript
复制
<input type="button" name="next" class="next action-button modal-close" value="Got it!">

代码语言：javascript
复制
<li class="active">Step 1</li>
代码语言：javascript
复制
<li>Step2</li>

代码语言：javascript
复制
<h2 class="fs-title">Basic Information</h2>
代码语言：javascript
复制
<h3 class="fs-subtitle">We just need some basic information to begin</h3>
代码语言：javascript
复制
<!-- Begin What's Your User ID Field -->
代码语言：javascript
复制
        <div class="hs_firstname field hs-form-field">
代码语言：javascript
复制
      <label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Your 8 digits User ID *</label>
代码语言：javascript
复制
      <input id="id" name="user_id"  required="required" type="number" onkeyup="GetDetail(this.value)" value="" placeholder="" data-rule-required="true" data-msg-required="Please insert your 8 digits User ID" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End What's Your User ID Field -->
代码语言：javascript
复制
<!-- Begin What's Your First Name Field -->
代码语言：javascript
复制
    <div class="row">
代码语言：javascript
复制
    <div class="col-md-6">
代码语言：javascript
复制
      <label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">What's your First Name? *</label>
代码语言：javascript
复制
      <input id="first_name" name="first_name" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your first name" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End What's Your First Name Field -->

代码语言：javascript
复制
    <div class="col-md-6">
代码语言：javascript
复制
      <label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">What's your First Name? *</label>
代码语言：javascript
复制
      <input id="last_name" name="last_name" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your last name" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End What's Your Last Name Field -->
代码语言：javascript
复制
<!-- Begin Address Field -->
代码语言：javascript
复制
    <div class="hs_firstname field hs-form-field">
代码语言：javascript
复制
      <label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Your Address *</label>
代码语言：javascript
复制
      <input id="address" name="address" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your address" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End Adress Field -->
代码语言：javascript
复制
<!-- Begin City Field -->
代码语言：javascript
复制
<div class="row">
代码语言：javascript
复制
    <div class="col-md-4">
代码语言：javascript
复制
      <label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">City *</label>
代码语言：javascript
复制
      <input id="city" name="city" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your City" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End City Field -->
代码语言：javascript
复制
<!-- Begin State Field -->
代码语言：javascript
复制
    <div class="col-md-4">
代码语言：javascript
复制
      <label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">State *</label>
代码语言：javascript
复制
      <input id="state" name="state" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your State" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End State Field -->
代码语言：javascript
复制
<!-- Begin Zip Field -->
代码语言：javascript
复制
    <div class="col-md-4">
代码语言：javascript
复制
      <label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Zip Code *</label>
代码语言：javascript
复制
      <input id="zip" name="zip" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your Zip Code" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End Zip Field -->
代码语言：javascript
复制
<!-- Begin What's Your Email Field -->
代码语言：javascript
复制
    <div class="hs_email field hs-form-field">
代码语言：javascript
复制
      <label for="email-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Your E-mail Address? *</label>
代码语言：javascript
复制
      <input id="email-99a6d115-5e68-4355-a7d0-529207feb0b3_2983" name="email" required="required" type="email" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid email address." >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End What's Your Email Field -->
代码语言：javascript
复制
<!-- Begin Total Number of Constituents in Your Database Field -->
代码语言：javascript
复制
    <div class="row">
代码语言：javascript
复制
    <div class="col-md-4">
代码语言：javascript
复制
      <label for="edit-submitted-constituent-base-total-constituents total_number_of_constituents_in_your_database-99a6d115-5e68-4355-a7d0-529207feb0b3_6344">Cell Phone No. *</label>
代码语言：javascript
复制
      <input id="cell" class="form-text hs-input" name="cell" required="required" size="60" maxlength="128" type="phone" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid Cell Phone Number" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End Cell Phone Field -->
代码语言：javascript
复制
<!-- Begin Total Number of Constituents in Your Database Field -->
代码语言：javascript
复制
    <div class="col-md-4">
代码语言：javascript
复制
      <label for="edit-submitted-constituent-base-total-constituents total_number_of_constituents_in_your_database-99a6d115-5e68-4355-a7d0-529207feb0b3_6344">Office Phone No. </label>
代码语言：javascript
复制
      <input id="office_phone" class="form-text hs-input" name="office_phone" required="required" size="60" maxlength="128" type="phone" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a Office Phone Number" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
<!-- End Cell Phone Field -->
代码语言：javascript
复制
 <!-- Begin Office Phone Field -->
代码语言：javascript
复制
    <div class="col-md-4">
代码语言：javascript
复制
      <label for="edit-submitted-constituent-base-total-constituents total_number_of_constituents_in_your_database-99a6d115-5e68-4355-a7d0-529207feb0b3_6344">Home Phone No.</label>
代码语言：javascript
复制
      <input id="home_phone" class="form-text hs-input" name="home_phone" required="required" size="60" maxlength="128" type="phone" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid number" >
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
    </div>
代码语言：javascript
复制
  <!-- End Office Phone Field -->

代码语言：javascript
复制
<h2 class="fs-title">Retention of your donors</h2>
代码语言：javascript
复制
<h3 class="fs-subtitle">How long can you keep your donors and their donations?</h3>
代码语言：javascript
复制
    <!-- Begin Monthly Rent Field -->
代码语言：javascript
复制
      <div class="form-item webform-component webform-component-textfield hs_number_of_donors_in_year_1 field hs-form-field" id="webform-component-retention--amount-1">
代码语言：javascript
复制
      <label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Monthly Rent</label>
代码语言：javascript
复制
      <input id="monthly_rent" class="form-text hs-input" name="monthly_rent" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
    <!-- End Monthly Rent Field-->
代码语言：javascript
复制
    <!-- Begin Length of time at residence? Field -->
代码语言：javascript
复制
    <div class="row">
代码语言：javascript
复制
      <div class="col-md-6" id="webform-component-retention--amount-1">
代码语言：javascript
复制
      <label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Length of time at residence? __ yrs.</label>
代码语言：javascript
复制
      <input id="residence_yrs" class="form-text hs-input" name="residence_yrs" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
    <!-- End Length of time Field-->
代码语言：javascript
复制
    <!-- Begin Length of time at residence? Field -->
代码语言：javascript
复制
      <div class="col-md-6" id="webform-component-retention--amount-1">
代码语言：javascript
复制
      <label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Length of time at residence?___ mos.</label>
代码语言：javascript
复制
      <input id="residence_mos" class="form-text hs-input" name="residence_mos" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
    <!-- End Length of time mons Field-->
代码语言：javascript
复制
            <!-- Begin Age Field -->
代码语言：javascript
复制
    <div class="row">
代码语言：javascript
复制
      <div class="col-md-6" id="webform-component-retention--amount-1">
代码语言：javascript
复制
      <label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Age</label>
代码语言：javascript
复制
      <input id="age" class="form-text hs-input" name="age" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Age">
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
    <!-- End Age Field-->
代码语言：javascript
复制
    <!-- Begin Gender Field -->
代码语言：javascript
复制
      <div class="col-md-6" id="webform-component-retention--amount-1">
代码语言：javascript
复制
      <label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Gender</label>
代码语言：javascript
复制
      <input id="gender" class="form-text hs-input" name="gender" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
    <!-- End Gender Field-->
代码语言：javascript
复制
            <!-- Begin Length of time at residence? Field -->
代码语言：javascript
复制
    <div class="row">
代码语言：javascript
复制
      <div class="col-md-6" id="webform-component-retention--amount-1">
代码语言：javascript
复制
      <label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Spouse’s Name</label>
代码语言：javascript
复制
      <input id="spouse_name" class="form-text hs-input" name="spouse_name" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Spouse’s Name">
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
    <!-- End Spouse’s Name Field-->
代码语言：javascript
复制
    <!-- Begin Spouse’s Age Field -->
代码语言：javascript
复制
      <div class="col-md-6" id="webform-component-retention--amount-1">
代码语言：javascript
复制
      <label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Spouse’s Age</label>
代码语言：javascript
复制
      <input id="spouse_age" class="form-text hs-input" name="spouse_age" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Spouse’s Age">
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
    <!-- End Spouse’s Age Field-->
代码语言：javascript
复制
    <!-- Begin Have you contributed to a 401(k)/403(b)/IRA retirement program in the past year? select -->
代码语言：javascript
复制
      <div class="form-item webform-component webform-component-textfield" id="webform-component-retention--percent-change field hs-form-field">
代码语言：javascript
复制
      <label for="edit-submitted-retention-percent-change">Retention Rate</label>
代码语言：javascript
复制
     <select id="select1" class="form-text hs-input" name="select1"  value="" placeholder="0">
代码语言：javascript
复制
         <option value="yes">Yes</option>
代码语言：javascript
复制
         <option value="no">No</option>
代码语言：javascript
复制
      </select>
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
    <!-- End Have you contributed to a 401(k)/403(b)/IRA retirement program in the past year? select -->
代码语言：javascript
复制
    <!-- Begin Best time/day to contact Field -->
代码语言：javascript
复制
      <div class="form-item webform-component webform-component-textfield hs_number_of_donors_in_year_1 field hs-form-field" id="webform-component-retention--amount-1">
代码语言：javascript
复制
      <label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Best time/day to contact:</label>
代码语言：javascript
复制
      <input id="best_time" class="form-text hs-input" name="best_time" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid time">
代码语言：javascript
复制
      <span class="error1" style="display: none;">
代码语言：javascript
复制
          <i class="error-log fa fa-exclamation-triangle"></i>
代码语言：javascript
复制
      </span>
代码语言：javascript
复制
      </div>
代码语言：javascript
复制
    <!-- End Best time/day to contact Field-->
代码语言：javascript
复制
<input type="button" data-page="5" name="previous" class="previous action-button" value="Previous" />
代码语言：javascript
复制
<input id="submit" class="hs-button primary large action-button next" type="submit" value="Submit">
代码语言：javascript
复制
<div class="explanation btn btn-small modal-trigger" data-modal-id="modal-3">What Is This?</div>

代码语言：javascript
复制
<h2 class="fs-title">It's on the way!</h2>
代码语言：javascript
复制
<h3 class="fs-subtitle">Thank you for trying out our marketing grader, please go check your email for your fundraising report card and some helpful tips to improve it!</h3>
代码语言：javascript
复制
<div class="explanation btn btn-small modal-trigger" data-modal-id="modal-3">What Is This?</div>

代码语言：javascript
复制
代码语言：javascript
复制
javascript
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-08-26 14:48:55

您的CSS中有一个媒体查询，它正是对此行为负责的。

代码语言：javascript
复制
@media (max-width:675px){
/*mobile phone: uncollapse all fields: remove progress bar*/

.steps {
  width: 100%;
  margin: 50px auto;
  position: relative;
}

#progressbar{
  display:none;
}

/*move error logs */
.error1 {
  position: relative;
  left: 0 !important;
  margin-top: 24px;
  top: -11px;
}

.error1:before {
  width: 0;
  height: 0;
  left: 14px;
  top: -14px;
  content: '';
  position: absolute;
  border-left: 6px solid transparent;
  border-bottom: 8px solid #e62163;
  border-right: 6px solid transparent;
  }

/*show hidden fieldsets */
.steps fieldset:not(:first-of-type) {
  display: block;
}

.steps fieldset{
  position:relative;
  width: 100%;
  margin:0 auto;
  margin-top: 45px;
}

.steps .next, .steps .previous{
  display:none;
}

.steps .explanation{
  display:none;
}

.steps .submit {
  float: right;
  margin: 28px auto 10px;
  width: 100% !important;
}

}
票数 0
EN

Stack Overflow用户

发布于 2021-08-26 14:47:41

和CSS代码

代码语言：javascript
复制
/*basic reset*/
* {margin: 0; padding: 0;}

html {
 height: 100%;
 /*Image only BG fallback*/
 background: #e9e9e9;
}

body {
 font-family: montserrat, arial, verdana;
   width: 100%;
 overflow-x: hidden;
}
/*form styles*/
.steps {
   width: 100%;
 margin: 50px auto;
 position: relative;
}

.steps fieldset {
 background: white;
 border: 0 none;
 border-radius: 3px;
 box-shadow: 0 17px 41px -21px rgb(0, 0, 0);
 padding: 20px 30px;
 border-top: 9px solid #303030;
 box-sizing: border-box;
 width: 80%;
 margin: 0 10%;
 
 /*stacking fieldsets above each other*/
 position: relative;
}
/*Hide all except first fieldset*/
.steps fieldset:not(:first-of-type) {
 display: none;
}
/*inputs*/
.steps label{
 color: #333333;
 text-align: left !important;
 font-size: 15px;
 font-weight: 200;
 padding-bottom: 7px;
 padding-top: 12px;
 display: inline-block;
}


.steps input, .steps textarea {
 outline: none;
 display: block;
 width: 100%;
 margin: 0 0 20px;
 padding: 10px 15px;
 border: 1px solid #d9d9d9;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 color: #837E7E;
 font-family: "Roboto";
 -webkti-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 font-size: 14px;
 font-wieght: 400;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-transition: all 0.3s linear 0s;
 -moz-transition: all 0.3s linear 0s;
 -ms-transition: all 0.3s linear 0s;
 -o-transition: all 0.3s linear 0s;
 transition: all 0.3s linear 0s;
}

.steps input:focus, .steps textarea:focus{
 color: #333333;
 border: 1px solid #303030;
}

.error1{
  -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 -moz-box-shadow: 0 0 0 transparent;
 -webkit-box-shadow: 0 0 0 transparent;
 box-shadow: 0 0 0 transparent;
 position: absolute;
 left: 105px;
 margin-top: -58px;
 padding: 0 10px;
 height: 39px;
 display: block;
 color: #ffffff;
 background: #e62163;
 border: 0;
 font: 14px Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
 line-height: 39px;
 white-space: nowrap;

}

.error1:before{
   width: 0;
 height: 0;
 left: -8px;
 top: 14px;
 content: '';
 position: absolute;
 border-top: 6px solid transparent;
 border-right: 8px solid #e62163;
 border-bottom: 6px solid transparent;
}

.error-log{
   margin: 5px 5px 5px 0;
 font-size: 19px;
 position: relative;
 bottom: -2px;
}

.question-log {
 margin: 5px 1px 5px 0;
 font-size: 15px;
 position: relative;
 bottom: -2px;
 }

/*buttons*/
.steps .action-button, .action-button {
 width: 100px !important;
 background: #303030;
 font-weight: bold;
 color: white;
 border: 0 none;
 border-radius: 1px;
 cursor: pointer;
 padding: 10px 5px;
 margin: 10px auto;
 -webkit-transition: all 0.3s linear 0s;
 -moz-transition: all 0.3s linear 0s;
 -ms-transition: all 0.3s linear 0s;
 -o-transition: all 0.3s linear 0s;
 transition: all 0.3s linear 0s;
 display: block;
}

.steps .next, .steps .submit{
   float: right;
}

.steps .previous{
 float:left;
}

.steps .action-button:hover, .steps .action-button:focus, .action-button:hover, .action-button:focus {
 background:#444343;;
}

.steps .explanation{
display: block;
 clear: both;
 width: 540px;
 background: #f2f2f2;
 position: relative;
 margin-left: -30px;
 padding: 22px 0px;
 margin-bottom: -10px;
 border-bottom-left-radius: 3px;
 border-bottom-right-radius: 3px;
 top: 10px;
 text-align: center;
 color: #333333;
 font-size: 12px;
 font-weight: 200;
 cursor:pointer;
}


/*headings*/
.fs-title {
 text-transform: uppercase;
    margin: 0 0 5px;
    line-height: 1;
    color: #303030;
    font-size: 18px;
   font-weight: 400;
   text-align:center;
}
.fs-subtitle {
 font-weight: normal;
 font-size: 13px;
 color: #837E7E;
 margin-bottom: 20px;
 text-align: center;
}
/*progressbar*/
#progressbar {
 margin-bottom: 30px;
 overflow: hidden;
 /*CSS counters to number the steps*/
 counter-reset: step;
 width:100%;
 text-align: center;
}
#progressbar li {
 list-style-type: none;
   color: rgb(51, 51, 51);
 text-transform: uppercase;
 font-size: 9px;
 width: 50%;
 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: #303030;
 color: white;
}


/* my modal */

.modal p{
 font-size: 15px;
 font-weight: 100;
 font-family: sans-serif;
 color: #3C3B3B;
 line-height: 21px;
}

.modal {
 position: fixed;
 top: 50%;
 left: 50%;
 width: 50%;
 max-width: 630px;
 min-width: 320px;
 height: auto;
 z-index: 2000;
 visibility: hidden;
 -moz-backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
.modal.modal-show {
 visibility: visible;
}
.lt-ie9 .modal {
 top: 0;
 margin-left: -315px;
}

.modal-content {
 background: #ffffff;
 position: relative;
 margin: 0 auto;
 padding: 40px;
 border-radius: 3px;
}

.modal-overlay {
 background: #000000;
 position: fixed;
 visibility: hidden;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1000;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 -moz-transition-property: visibility, opacity;
 -o-transition-property: visibility, opacity;
 -webkit-transition-property: visibility, opacity;
 transition-property: visibility, opacity;
 -moz-transition-delay: 0.5s, 0.1s;
 -o-transition-delay: 0.5s, 0.1s;
 -webkit-transition-delay: 0.5s, 0.1s;
 transition-delay: 0.5s, 0.1s;
 -moz-transition-duration: 0, 0.5s;
 -o-transition-duration: 0, 0.5s;
 -webkit-transition-duration: 0, 0.5s;
 transition-duration: 0, 0.5s;
}
.modal-show .modal-overlay {
 visibility: visible;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
 opacity: 0.6;
 -moz-transition: opacity 0.5s;
 -o-transition: opacity 0.5s;
 -webkit-transition: opacity 0.5s;
 transition: opacity 0.5s;
}

/*slide*/
.modal[data-modal-effect|=slide] .modal-content {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 -moz-transition: all 0.5s 0;
 -o-transition: all 0.5s 0;
 -webkit-transition: all 0.5s 0;
 transition: all 0.5s 0;
}
.modal[data-modal-effect|=slide].modal-show .modal-content {
 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
 opacity: 1;
 -moz-transition: all 0.5s 0.1s;
 -o-transition: all 0.5s 0.1s;
 -webkit-transition: all 0.5s;
 -webkit-transition-delay: 0.1s;
 transition: all 0.5s 0.1s;
}
.modal[data-modal-effect=slide-top] .modal-content {
 -moz-transform: translateY(-300%);
 -ms-transform: translateY(-300%);
 -webkit-transform: translateY(-300%);
 transform: translateY(-300%);
}
.modal[data-modal-effect=slide-top].modal-show .modal-content {
 -moz-transform: translateY(0);
 -ms-transform: translateY(0);
 -webkit-transform: translateY(0);
 transform: translateY(0);
}


/* RESPONSIVE */

/* moves error logs in tablet/smaller screens */

@media (max-width:1000px){

/*brings inputs down in size */
.steps input, .steps textarea {
 outline: none;
 display: block;
 width: 100% !important;
 }

 /*brings errors in */
 .error1 {
 left: 345px;
 margin-top: -58px;
}




}


@media (max-width:675px){
/*mobile phone: uncollapse all fields: remove progress bar*/

.steps {
 width: 100%;
 margin: 50px auto;
 position: relative;
}

#progressbar{
 display:none;
}

/*move error logs */
.error1 {
 position: relative;
 left: 0 !important;
 margin-top: 24px;
 top: -11px;
}

.error1:before {
 width: 0;
 height: 0;
 left: 14px;
 top: -14px;
 content: '';
 position: absolute;
 border-left: 6px solid transparent;
 border-bottom: 8px solid #e62163;
 border-right: 6px solid transparent;
 }

/*show hidden fieldsets */
.steps fieldset:not(:first-of-type) {
 display: block;
}

.steps fieldset{
 position:relative;
 width: 100%;
 margin:0 auto;
 margin-top: 45px;
}

.steps .next, .steps .previous{
 display:none;
}

.steps .explanation{
 display:none;
}

.steps .submit {
 float: right;
 margin: 28px auto 10px;
 width: 100% !important;
}

}



/* Info */
.info {
 width: 300px;
 margin: 35px auto;
 text-align: center;
 font-family: 'roboto', sans-serif;
}

.info h1 {
 margin: 0;
 padding: 0;
 font-size: 28px;
 font-weight: 400;
 color: #333333;
 padding-bottom: 5px;

}
.info span {
 color:#666666;
 font-size: 13px;
 margin-top:20px;
}
.info span a {
 color: #666666;
 text-decoration: none;
}
.info span .fa {
 color: rgb(226, 168, 16);
 font-size: 19px;
 position: relative;
 left: -2px;
}

.info span .spoilers {
 color: #999999;
 margin-top: 5px;
 font-size: 10px;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68940633

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档