Question

我有一个自定义复选框，我正在使用样式：在复选框的标签之前。现在我有一个条件，我希望将复选框的边框颜色更改为红色。我不确定我该怎么做？请在下面找到类和html结构：

<input id="tAndC" name="tAndC" type="checkbox"  class="paddingLeft" ng-checked= "card.acceptTC" required ng-model="card.acceptTC" ng-change="revertFocusOutTC()" ng-blur=""  >

                    <label for="tAndC" class="checkbox1 chkSmall chkTAndC marginLeft" ng-class="focusedOutTC?'checkboxErr':''">

CSS：

.checkbox1:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background-color: transparent;
    color: #818181;
    text-align: center;
    border-color: #818181;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    float: left;
}

Answer 1

请按以下方式尝试此角度ng-class属性：

ng-class="{ checkboxErr : !!focusedOutTC }"

说明：只有当Boolean focusedOutTC的{{1}}代表true时才会安装checkboxErr类名。

Answer 2

将该类放在输入上并相应地扩展您的CSS

ng-class="{ 'classname': condition }"

或者，如果你想使用ng-class，你必须坚持使用ng-class语法，例如

{{1}}

Answer 3

我想到了两件事。你可以这样做：

.checkbox1:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background-color: transparent;
    color: #818181;
    text-align: center;    
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    float: left;
}
.grayBorder{
    border-color: #818181;
}
.redBorder{
    border-color: red;
}
                    <label for="tAndC" class="checkbox1 chkSmall chkTAndC marginLeft" ng-class="focusedOutTC?'grayBorder ':'redBorder">

或者你可以随时

<label id="label1" for="tAndC" class="checkbox1 chkSmall chkTAndC marginLeft" ng-class="focusedOutTC?'grayBorder ':'redBorder">

......在JS中

angular.element("#label1").addClass("redBorder");
angular.element("#label1").removeClass("redBorder");

你也可以做angular.element（“＃id”）。css（“border-color：red”）;

如何使用ng-class更改css中的伪类？

3 个答案: