How to make input field border red on alert dismis

Question

I am using jquery conferm.js alert for an input when presing a button If the input field is empty then showing alert that time it is taking default bootstrap 4(blue color) I want it to be red and should be focus in that field, so when user starts typing it should turn back to green I have tried but it is not working fine

 $("#save").on('click', function() { if ($('#numberInp').val() == '') { $.alert({ title: 'Alert!', content: 'Please enterThis field', buttons: { specialKey: { text: 'Ok', keys: ['enter'], action: function() { } }, }, onDestroy: function() { $('#numberInp').focus(); $('#numberInp').addClass('add'); } }); return false; } }) $(document).on("keyup", "#numberInp", function(e) { $('#numberInp').removeClass("add"); }); 

 .add { border-color: #FF0000; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2"> <label for="numberInp">Number</label> <div class="input-group"> <input type="tel" class="form-control" aria-label="Text input with dropdown button" name="numberInp" id="numberInp"> </div> </div> <button type="button" id="save" class="commonButton"> <i class="fa fa-print"></i>&nbsp;save </button> 

Answer 1

You'll need to force it with the !important flag:

.add {
  border-color: #FF0000 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

That works for me.

The reason is because in the CSS form-control:focus is defined first and it already has a border-color attribute. Since they are CASCADING style sheets (think top to bottom), if another control defines the CSS property first, it takes precedence unless you force it with !important

Answer 2

@Zizzyzizzy is right, you might also need box-shadow :

.add:focus {
  border-color: #FF0000 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 129, 0.25) !important;
}

 $("#save").on('click', function() { if ($('#numberInp').val() == '') { $.alert({ title: 'Alert!', content: 'Please enterThis field', buttons: { specialKey: { text: 'Ok', keys: ['enter'], action: function() { } }, }, onDestroy: function() { $('#numberInp').focus(); $('#numberInp').addClass('add'); } }); } }) $(document).on("keyup", "#numberInp", function(e) { $('#numberInp').removeClass("add"); }); 

 .add:focus { border-color: #FF0000 !important; box-shadow: 0 0 0 0.2rem rgba(255, 0, 129, 0.25) !important; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2"> <label for="numberInp">Number</label> <div class="input-group"> <input type="tel" class="form-control" aria-label="Text input with dropdown button" name="numberInp" id="numberInp"> </div> </div> <button type="button" id="save" class="commonButton"> <i class="fa fa-print"></i>&nbsp;save </button>