AngularJS和Bootstrap输入边界焦点
AngularJS和Bootstrap输入边界焦点
提问于 2016-02-23 18:59:31
我需要设置原始边框颜色时，用户点击外部输入。当输入聚焦时，边框颜色变为红色，并保持红色，直到输入验证成功。
这是我的一段代码：
<div class="form-group has-feedback">
<input id="user_name" type="email" name="user_name" placeholder="Username" autocomplete="off" ng-model="user.user_name" required="" class="form-control burger-input" maxlength="50" focus-me="" />
<span class="fa fa-envelope form-control-feedback text-muted"></span>
<span ng-show="form_submitted && loginForm.user_name.$error.required" class="label label-danger">Questo campo è richiesto.</span>
<span ng-show="form_submitted && loginForm.user_name.$error.email" class="label label-danger">L'indirizzo e-mail dev'essere valido.</span>
</div>回答 3
Stack Overflow用户
发布于 2016-02-23 19:04:37
使用输入'required'属性和:focus http://www.w3schools.com/tags/att_input_required.asp
Stack Overflow用户
发布于 2016-02-23 19:07:44
在您的CSS中添加类似这样的内容
#user_name.ng-valid.ng-touched{
border:thick green solid;
}
#user_name.ng-invalid{
border:thick red solid;
}
#user_name.ng-pristine{
border:thick grey solid;
}
#user_name.ng-valid{
border:thick green solid;
}PLUNKR
根据Dwijen下面的建议，您还可以将其应用于类。
.form-control.ng-valid.ng-touched{
border:thick green solid;
}
.form-control.ng-invalid{
border:thick red solid;
}
.form-control.ng-pristine{
border:thick grey solid;
}
.form-control.ng-valid{
border:thick green solid;
}Stack Overflow用户
发布于 2016-02-23 19:51:54
你可以试试。能满足你的要求吗？
只需添加此css
.form-control.ng-pristine{
border:2px grey solid;
}
.form-control.ng-valid{
border:2px green solid;
}
.form-control.ng-invalid:focus {
border:2px red solid;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35575681
复制相关文章
相似问题
腾讯云开发者
