CODEWITHSUNDEEP
htmlcssbootstrap-4
Sidharth
Sidharth

Reputation: 47

Label is not becoming active for select box

When I click on select box, label is not becoming active. In input boxes, it's working fine.

Is it possible for select box also ? If not, please tell me another method to make it active.

When I click on input box

When I click on select box

Here is the code:

<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>

Upvotes: 0

Views: 325

Answers (3)

user9595480
user9595480

Reputation: 57

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;
}

Upvotes: 0

vishnu
vishnu

Reputation: 2948

You can do it with this JS. I just added .lab-active class for input & select fields. When the field is focused, it should be add a class into the 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>

Upvotes: 1

Chirag Patel
Chirag Patel

Reputation: 1642

Check this code. You have to define label for like <label for='class-incharge'> and then you have to give the same id to select tag and class form-control also remained to be added. like 

<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>

Just replace this code from <div class="modal fade" line.

<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>

Upvotes: 0

Related Questions