Question

当用户点击外部输入时，我需要设置原始边框颜色。当输入聚焦时，边框颜色变为红色，并保持红色直到输入验证成功。

这是我的代码的一部分：

<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 &amp;&amp; loginForm.user_name.$error.required" class="label label-danger">Questo campo è richiesto.</span>
                <span ng-show="form_submitted &amp;&amp; loginForm.user_name.$error.email" class="label label-danger">L'indirizzo e-mail dev'essere valido.</span>
            </div>

Answer 1

使用输入'required'属性和:focus http://www.w3schools.com/tags/att_input_required.asp

Answer 2

将这样的内容添加到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;
}

Answer 3

你可以尝试一下。可能满足您的要求

只需添加此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;
}

PLUNKER DEMO LINK

AngularJS和Bootstrap输入边框焦点

3 个答案: