Html CSS表单不显示单选按钮

【问题标题】：Html CSS form not showing radio buttonHtml CSS表单不显示单选按钮
【发布时间】：2018-11-21 06:35:34
【问题描述】：

我想创建一个注册表单。我放置了 HTML 单选按钮代码，但是，它没有显示单选按钮。 我在谷歌浏览器开发者工具中使用了“检查元素”，但无法解决问题。

我已经突出显示了容易出错的区域。休息区工作正常。

项目代码已给出。我是前端新手，请帮忙。

$('.form').find('input').on('keyup blur focus', function(e) {

  var $this = $(this),
    label = $this.prev('label');

  if (e.type === 'keyup') {
    if ($this.val() === '') {
      label.removeClass('active highlight');
    } else {
      label.addClass('active highlight');
    }
  } else if (e.type === 'blur') {
    if ($this.val() === '') {
      label.removeClass('active highlight');
    } else {
      label.removeClass('highlight');
    }
  } else if (e.type === 'focus') {

    if ($this.val() === '') {
      label.removeClass('highlight');
    } else if ($this.val() !== '') {
      label.addClass('highlight');
    }
  }

});

$('.tab a').on('click', function(e) {

  e.preventDefault();

  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');

  target = $(this).attr('href');

  $('.tab-content > div').not(target).hide();

  $(target).fadeIn(600);

});
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  background: url(../background.jpg);
  /*font-family: 'Titillium Web', sans-serif;*/
  font-family: 'Roboto', sans-serif;
  background-size: cover;
}

.user {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  top: -10px;
  left: calc(50%-50px);
  right: -170px;
}

a {
  text-decoration: none;
  color: rgb(39, 153, 219);
  transition: .5s ease;
}

a:hover {
  color: #179b77;
}

.form {
  padding: 40px;
  max-width: 500px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
  transition: .5s ease;
  position: relative;
}

.form:hover {
  box-shadow: 0px 0px 40px 16px rgba(18, 18, 18, 1.00);
}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 5px 20px 0;
}

.tab-group:after {
  content: "";
  display: table;
  clear: both;
}

.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: #0C0E67;
  color: #fff;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: .5s ease;
}

.tab-group li a:hover {
  background: #0C0E67;
  color: #ffffff;
}

.tab-group .active a {
  background: #1316FA;
  color: #ffffff;
}

.tab-content>div:last-child {
  display: none;
}

h1 {
  text-align: center;
  color: #fff;
  font-weight: 300;
  margin: 0 0 40px;
}


/*label {
  position: absolute;
  transform: translateY(6px);
  left: 13px;
  color: rgba(255,255,255,0.7);
  transition: all 0.25s ease;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: red;
}*/

label.active {
  transform: translateY(50px);
  left: 2px;
  font-size: 0px;
}

label.active .req {
  opacity: 0;
}

label.highlight {
  color: #000;
  margin-top: -10px;
}

input {
  font-size: 18px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1px 3px;
  background-image: none;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}

input:focus {
  outline: 0;
  border-color: #000;
}

.field-wrap input {
  padding-left: 40px;
}

.field-wrap i {
  position: absolute;
  left: 0;
  top: -5px;
  padding: 9px 8px;
  color: silver;
}

.field-wrap {
  position: relative;
  margin-bottom: 30px;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}

.top-row>div {
  float: left;
  width: 48%;
  margin-right: 4%;
}

.top-row>div:last-child {
  margin: 0;
}

#sp1 {}

.button {
  border: 0;
  outline: none;
  border-radius: 20px;
  padding: 5px 5px;
  font-size: 2rem;
  font-weight: 50rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: rgb(54, 57, 221);
  color: #ffffff;
  transition: all 0.5s ease;
}

.button:hover,
.button:focus {
  background: #1316FA;
}

.button-block {
  display: block;
  width: 100%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
  margin-bottom: 10px;
}

fieldset.date {
  margin: 0;
  padding: 0;
  padding-left: 20px;
  padding-bottom: .5em;
  display: block;
  border: none;
}

fieldset.date legend {
  margin: 0;
  padding: 0;
  margin-top: .25em;
  font-size: 100%;
}

fieldset.date label {
  position: absolute;
  top: -20em;
  left: -200em;
}

fieldset.date select {
  margin: 0;
  padding: 0;
  font-size: 100%;
  display: inline;
}
<!DOCTYPE html>
<html>

<head>
  <title>Sign-Up/Login Form</title>
  <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="form">

    <ul class="tab-group">
      <li class="tab active"><a href="#signup">Sign Up</a></li>
      <li class="tab"><a href="#login">Log In</a></li>
    </ul>

    <div class="tab-content">
      <div id="signup">

        <form action="" method="post">


          <div class="field-wrap">
            <input type="text" placeholder="First Name" required autocomplete="off" />
            <i class="fa fa-user icon"></i>
          </div>


          <div class="field-wrap">

            <input type="text" placeholder="Last Name" required autocomplete="off" />
            <i class="fa fa-user icon"></i>
          </div>

          <div class="field-wrap">

            <input type="email" placeholder="E-mail" required autocomplete="off" />
            <i class="fa fa-envelope icon"></i>
          </div>

          <div class="field-wrap">
            <input type="password" placeholder="Password" required autocomplete="off" />
            <i class="fa fa-lock icon"></i>
          </div>

          <div class="field-wrap">
            <input type="tel" placeholder="Phone" required autocomplete="off" />
            <i class="fa fa-phone icon"></i>
          </div>

          <div class="field-wrap">
            <input type="text" placeholder="Post Code" pattern="[0-9]{5}" required autocomplete="off" />
            <i class="fa fa-map-marker icon"></i>
          </div>

          <!--Problem Region-->

          Gender<br>
          <div>

            <input type="radio" name="gender">Male
            <input type="radio" name="gender" />Female

          </div>


          <fieldset class="date">
            <legend>Birthday </legend>
            <label for="month_start">Month</label>
            <select id="month_start" name="month_start" />
            <option>January</option>
            <option>February</option>
            <option>March</option>
            <option>April</option>
            <option>May</option>
            <option>June</option>
            <option>July</option>
            <option>August</option>
            <option>September</option>
            <option>October</option>
            <option>November</option>
            <option>December</option>
            </select> -
            <label for="day_start">Day</label>
            <select id="day_start" name="day_start" />
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option>31</option>
            </select> -
            <label for="year_start">Year</label>
            <select id="year_start" name="year_start" />
            <option>2009</option>
            <option>2010</option>
            <option>2011</option>
            <option>2012</option>
            <option>2013</option>
            <option>2014</option>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
            </select>
          </fieldset>

          <!--Error RegionEnds-->

          <button type="submit" class="button button-block" />Register </button>

        </form>

      </div>

      <div id="login">

        <img src="./user.png" class="user">

        <form action="/" method="post">

          <div class="field-wrap">

            <input type="email" placeholder="E-mail" required autocomplete="off" />
            <i class="fa fa-envelope icon"></i>
          </div>

          <div class="field-wrap">
            <input type="password" placeholder="Password" required autocomplete="off" />
            <i class="fa fa-lock icon"></i>
          </div>

          <p class="forgot"><a href="#">Forgot Password?</a></p>

          <button class="button button-block" />Log In</button>

        </form>

      </div>

    </div>
    <!-- tab-content -->

  </div>
  <!-- /form -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src="js/index.js"></script>

</body>

</html>

【问题讨论】：

  • 我看到单选按钮，它们与标签重叠。
  • 您应该在按钮和文本周围加上&lt;label&gt;，这样用户就可以点击单词，而不必精确地点击按钮。

标签： javascript html css radio-button


【解决方案1】：

您在 CSS 中使用 input 选择器的 height 属性会丢弃您的标记，并导致单选按钮展开远远超出您可以看到的点。我建议更具体地使用您的选择器。以下代码可让您了解正在发生的事情以及如何解决它：

$('.form').find('input').on('keyup blur focus', function (e) {
  
  var $this = $(this),
      label = $this.prev('label');

	  if (e.type === 'keyup') {
			if ($this.val() === '') {
          label.removeClass('active highlight');
        } else {
          label.addClass('active highlight');
        }
    } else if (e.type === 'blur') {
    	if( $this.val() === '' ) {
    		label.removeClass('active highlight'); 
			} else {
		    label.removeClass('highlight');   
			}   
    } else if (e.type === 'focus') {
      
      if( $this.val() === '' ) {
    		label.removeClass('highlight'); 
			} 
      else if( $this.val() !== '' ) {
		    label.addClass('highlight');
			}
    }

});

$('.tab a').on('click', function (e) {
  
  e.preventDefault();
  
  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');
  
  target = $(this).attr('href');

  $('.tab-content > div').not(target).hide();
  
  $(target).fadeIn(600);
  
});
*{
  box-sizing: border-box;
  margin:0px;
  padding:0px;
}


body {
  background:url(../background.jpg);
  /*font-family: 'Titillium Web', sans-serif;*/
  font-family: 'Roboto', sans-serif;
  background-size:cover;
}
.user{
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
top: -10px;
left: calc(50%-50px);
right: -170px;
}

a {
  text-decoration: none;
  color: rgb(39, 153, 219);
  transition: .5s ease;
}
a:hover {
  color: #179b77;
}

.form {
  padding: 40px;
  max-width: 500px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
  transition: .5s ease;
  position: relative;
  
}

.form:hover {
	box-shadow: 0px 0px 40px 16px rgba(18,18,18,1.00);
	}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 5px 20px 0;
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: #0C0E67;
  color: #fff;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: .5s ease;
}
.tab-group li a:hover {
  background: #0C0E67;
  color: #ffffff;
}
.tab-group .active a {
  background:#1316FA;
  color: #ffffff;
}

.tab-content > div:last-child {
  display: none;
}

h1 {
  text-align: center;
  color: #fff;
  font-weight: 300;
  margin: 0 0 40px;
}

/*label {
  position: absolute;
  transform: translateY(6px);
  left: 13px;
  color: rgba(255,255,255,0.7);
  transition: all 0.25s ease;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: red;
}*/

label.active {
  transform: translateY(50px);
  left: 2px;
  font-size: 0px;
}
label.active .req {
  opacity: 0;
}

label.highlight {
  color: #000;
  margin-top:-10px;
}
[type="radio"] {
height: 10px;
}
input {
  font-size: 18px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1px 3px;
  background-image: none;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus{
  outline: 0;
  border-color: #000;
}

.field-wrap input{
  padding-left: 40px;
}

.field-wrap i{
  position: absolute;
  left:0;
  top: -5px;
  padding: 9px 8px;
  color: silver;
}
.field-wrap {
  position: relative;
  margin-bottom: 30px;
  
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}

#sp1{
  
}
.button {
  border: 0;
  outline: none;
  border-radius: 20px;

  padding: 5px 5px;
  font-size: 2rem;
  font-weight: 50rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: rgb(54, 57, 221);
  color: #ffffff;
  transition: all 0.5s ease;
}
.button:hover, .button:focus {
  background: #1316FA;
}

.button-block {
  display: block;
  width: 100%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
  margin-bottom:10px;
}
fieldset.date { 
  margin: 0; 
  padding: 0; 
  padding-left: 20px; 
  padding-bottom: .5em; 
  display: block; 
  border: none; 
} 
fieldset.date legend { 
  margin: 0; 
  padding: 0; 
  margin-top: .25em; 
  font-size: 100%; 
} 


fieldset.date label { 
  position: absolute; 
  top: -20em; 
  left: -200em; 
} 

fieldset.date select { 
margin: 0; 
padding: 0; 
font-size: 100%; 
display: inline; 
}
<!DOCTYPE html>
<html>
<head>
  <title>Sign-Up/Login Form</title>
  <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css"> 
</head>

<body>
  <div class="form">
      
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>
      
      <div class="tab-content">
        <div id="signup">   
        
          <form action="" method="post">
          
         
            <div class="field-wrap">
              <input type="text" placeholder="First Name" required autocomplete="off" />
              <i class="fa fa-user icon"></i>
            </div>
        
            
          <div class="field-wrap">
              
            <input type="text" placeholder="Last Name" required autocomplete="off"/>
            <i class="fa fa-user icon"></i>
          </div>

          <div class="field-wrap">
            
            <input type="email" placeholder="E-mail" required autocomplete="off"/>
            <i class="fa fa-envelope icon"></i>
          </div>
          
          <div class="field-wrap">
            <input type="password" placeholder="Password" required autocomplete="off"/>
            <i class="fa fa-lock icon"></i>
          </div>

          <div class="field-wrap">
              <input type="tel" placeholder="Phone" required autocomplete="off"/>
              <i class="fa fa-phone icon"></i>
            </div>
          
            <div class="field-wrap">
                <input type="text" placeholder="Post Code" pattern="[0-9]{5}" required autocomplete="off"/>
                <i class="fa fa-map-marker icon"></i>
              </div>

<!--Problem Region-->

              Gender<br>
              <div>
                    
                  <input type="radio" name="gender" >Male
                  <input type="radio" name="gender" />Female
            
                </div>


                <fieldset class="date"> 
                    <legend>Birthday </legend> 
                    <label for="month_start">Month</label> 
                    <select id="month_start" 
                            name="month_start" /> 
                      <option>January</option>       
                      <option>February</option>       
                      <option>March</option>       
                      <option>April</option>       
                      <option>May</option>       
                      <option>June</option>       
                      <option>July</option>       
                      <option>August</option>       
                      <option>September</option>       
                      <option>October</option>       
                      <option>November</option>       
                      <option>December</option>       
                    </select> - 
                    <label for="day_start">Day</label> 
                    <select id="day_start" 
                            name="day_start" /> 
                      <option>1</option>       
                      <option>2</option>       
                      <option>3</option>       
                      <option>4</option>       
                      <option>5</option>       
                      <option>6</option>       
                      <option>7</option>       
                      <option>8</option>       
                      <option>9</option>       
                      <option>10</option>       
                      <option>11</option>       
                      <option>12</option>       
                      <option>13</option>       
                      <option>14</option>       
                      <option>15</option>       
                      <option>16</option>       
                      <option>17</option>       
                      <option>18</option>       
                      <option>19</option>       
                      <option>20</option>       
                      <option>21</option>       
                      <option>22</option>       
                      <option>23</option>       
                      <option>24</option>       
                      <option>25</option>       
                      <option>26</option>       
                      <option>27</option>       
                      <option>28</option>       
                      <option>29</option>       
                      <option>30</option>       
                      <option>31</option>       
                    </select> - 
                    <label for="year_start">Year</label> 
                    <select id="year_start" 
                           name="year_start" /> 
                      <option>2009</option>       
                      <option>2010</option>       
                      <option>2011</option>       
                      <option>2012</option>       
                      <option>2013</option>       
                      <option>2014</option>       
                      <option>2015</option>       
                      <option>2016</option>       
                      <option>2017</option>       
                      <option>2018</option>       
                    </select> 
                  </fieldset> 

              <!--Error RegionEnds-->

          <button type="submit" class="button button-block"/>Register </button>
          
          </form>

        </div>
        
        <div id="login">   
      
         <img src="./user.png" class="user">
          
          <form action="/" method="post">
          
           <div class="field-wrap">
            
            <input type="email" placeholder="E-mail" required autocomplete="off"/>
            <i class="fa fa-envelope icon"></i>
          </div>
          
          <div class="field-wrap">
            <input type="password" placeholder="Password" required autocomplete="off"/>
            <i class="fa fa-lock icon"></i>
          </div>
          
          <p class="forgot"><a href="#">Forgot Password?</a></p>
          
          <button class="button button-block"/>Log In</button>
          
          </form>

        </div>
        
      </div><!-- tab-content -->
      
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="js/index.js"></script>

</body>
</html>

【讨论】：

  • @SunandanBhakat 很高兴我能帮上忙！要接受答案，请务必点击它旁边的绿色复选标记！
【解决方案2】：

除了指出的高度问题。将单选按钮包装在标签标签内是个好主意。这使得用户更容易与之交互，因为它都是可点击的......

<label for="myRadioBtn">
  <input type="radio" name="myRadioBtn />
  <span>Label Text</span>
</label>

【讨论】：

    猜你喜欢
    • 2015-04-26
    • 2013-12-06
    • 2015-06-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode