标签未对选择框激活

时间：2018-04-05 05:45:08

标签： html css bootstrap-4

当我点击选择框时，label未变为有效状态。在输入框中，它工作正常。

选择框也可以吗？如果没有，请告诉我另一种让它激活的方法。

When I click on input box

When I click on select box

以下是代码： 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
  Launch demo modal
</button>
<div class="modal fade" id="customModal" role="dialog">
  <div class="modal-dialog modal-md">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
      </div>
      <div class="modal-body" id="modal-body">
        <div class='form-group'>
          <label for='cname'>Class Name</label>
           <input type='text' class='form-control' name='cname' id='cname' required>
        </div>
        <div class="row ">
          <div class="col-lg-5">
            <div class="form-group has-feedback is-empty">
              <label for='' class="">Class Incharge</label>
              <select class="myselect" style="border-width:none; width:100%;" >
                <option hidden selected disabled></option>
                <option>Sahal EV</option>
                <option>Muhammed Rahil</option>
                <option>Venmuka Jishwanth</option>
                <option>Freejin Ram Pacha</option>
              </select>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="form-group has-feedback is-empty">
              <label for='tkno'>Token Number</label>
              <input type='text' class='form-control' name='tkno' id='tkno' readonly>
            </div>
          </div>
          <div class="col-lg-2">
            <div class='form-group'>
              <label for='cap'>Capacity</label>
              <input type='text' class='form-control' name='cap' id='cap'>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer" id="modal-footer">
        <div class="row">
          <div class="col-xs-8 col-lg-10">
            <button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
          </div>
          <div class="col-xs-4 col-lg-2">
            <button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

你可以用这个JS做到这一点。我刚刚添加了.lab-active类用于输入＆amp;选择字段。当该字段被聚焦时，应该在label

中添加一个类 

$(".form-group .lab-active").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});
.labelfocus {
  color:red;
  font-weight: bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
  Launch demo modal
</button>
<div class="modal fade" id="customModal" role="dialog">
  <div class="modal-dialog modal-md">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
      </div>
      <div class="modal-body" id="modal-body">
        <div class='form-group'>
          <label for='cname'>Class Name</label>
           <input type='text' class='form-control lab-active' name='cname' id='cname' required>
        </div>
        <div class="row ">
          <div class="col-lg-5">
            <div class="form-group has-feedback is-empty">
              <label for='' class="">Class Incharge</label>
              <select class="myselect lab-active" style="border-width:none; width:100%;" >
                <option hidden selected disabled></option>
                <option>Sahal EV</option>
                <option>Muhammed Rahil</option>
                <option>Venmuka Jishwanth</option>
                <option>Freejin Ram Pacha</option>
              </select>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="form-group has-feedback is-empty">
              <label for='tkno'>Token Number</label>
              <input type='text' class='form-control lab-active' name='tkno' id='tkno' readonly>
            </div>
          </div>
          <div class="col-lg-2">
            <div class='form-group'>
              <label for='cap'>Capacity</label>
              <input type='text' class='form-control lab-active' name='cap' id='cap'>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer" id="modal-footer">
        <div class="row">
          <div class="col-xs-8 col-lg-10">
            <button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
          </div>
          <div class="col-xs-4 col-lg-2">
            <button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

检查此代码。您必须为类似<label for='class-incharge'>定义标签，然后您必须为select标记提供相同的ID，并且仍然需要添加 form-control 类。 喜欢

<select class="myselect form-control" id="class-incharge" style="border-width:none; width:100%;" >


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
  Launch demo modal
</button>
<div class="modal fade" id="customModal" role="dialog">
  <div class="modal-dialog modal-md">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
      </div>
      <div class="modal-body" id="modal-body">
        <div class='form-group'>
          <label for='cname'>Class Name</label>
           <input type='text' class='form-control' name='cname' id='cname' required>
        </div>
        <div class="row ">
          <div class="col-lg-5">
            <div class="form-group has-feedback is-empty">
              <label for='class-incharge' class="">Class Incharge</label>
              <select class="myselect form-control" id="class-incharge" style="border-width:none; width:100%;" >
                <option hidden selected disabled></option>
                <option>Sahal EV</option>
                <option>Muhammed Rahil</option>
                <option>Venmuka Jishwanth</option>
                <option>Freejin Ram Pacha</option>
              </select>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="form-group has-feedback is-empty">
              <label for='tkno'>Token Number</label>
              <input type='text' class='form-control' name='tkno' id='tkno' readonly>
            </div>
          </div>
          <div class="col-lg-2">
            <div class='form-group'>
              <label for='cap'>Capacity</label>
              <input type='text' class='form-control' name='cap' id='cap'>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer" id="modal-footer">
        <div class="row">
          <div class="col-xs-8 col-lg-10">
            <button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
          </div>
          <div class="col-xs-4 col-lg-2">
            <button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

只需从<div class="modal fade"行替换此代码。

<div class="modal fade" id="customModal" role="dialog">
  <div class="modal-dialog modal-md">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
      </div>
      <div class="modal-body" id="modal-body">
        <div class='form-group'>
          <label for='cname'>Class Name</label>
           <input type='text' class='form-control' name='cname' id='cname' required>
        </div>
        <div class="row ">
          <div class="col-lg-5">
            <div class="form-group has-feedback is-empty">
              <label for='class-incharge' class="">Class Incharge</label>
              <select class="myselect form-control" id="class-incharge" style="border-width:none; width:100%;" >
                <option hidden selected disabled></option>
                <option>Sahal EV</option>
                <option>Muhammed Rahil</option>
                <option>Venmuka Jishwanth</option>
                <option>Freejin Ram Pacha</option>
              </select>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="form-group has-feedback is-empty">
              <label for='tkno'>Token Number</label>
              <input type='text' class='form-control' name='tkno' id='tkno' readonly>
            </div>
          </div>
          <div class="col-lg-2">
            <div class='form-group'>
              <label for='cap'>Capacity</label>
              <input type='text' class='form-control' name='cap' id='cap'>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer" id="modal-footer">
        <div class="row">
          <div class="col-xs-8 col-lg-10">
            <button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
          </div>
          <div class="col-xs-4 col-lg-2">
            <button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

JS：

$( document ).ready(function() {
$(".form-control.lab-active").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});
});

的CSS：

.labelfocus {
  color:red;
  font-weight: bold;
}
相关问题
最新问题