[英]How to make input field border red on alert dismis
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 我在按下按钮时正在使用jquery conferm.js
警报作为输入内容。如果输入字段为空,则显示警报它正在使用默认的引导程序4(蓝色),我希望它为红色,并且应将焦点放在该字段上,因此,当用户开始输入内容时,它应该变回绿色,我已经尝试过了,但无法正常工作
$("#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> save </button>
You'll need to force it with the !important flag: 您需要使用!important标志强制使用它:
.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. 原因是因为在CSS form-control:focus中首先定义了它,并且它已经具有border-color属性。 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 由于它们是CASCADING样式表(从上到下思考),因此,如果另一个控件首先定义CSS属性,则除非您用!important强制使用它,否则它将优先于CSS属性。
@Zizzyzizzy is right, you might also need box-shadow
: @Zizzyzizzy是正确的,您可能还需要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> save </button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.