对于特定的单击，从复选框中删除刻度线并使用复选框内的红色

Question

• 如果我点击第三次，小复选框应该变成红色，并且勾号不应该显示在文本框内。复选框内的勾号应该在复选框内显示红色。
• 你能告诉我如何解决它。

• 在下面提供我的代码。

  https://stackblitz.com/edit/angular-sq2q93?file=app%2Fapp.component.ts

  {{1}}

Answer 1

Checkboxes无法设置样式。您需要第三方js插件，并且有许多可用。 （像这一个http://icheck.fronteed.com/）

但是如果你想自己这样做，它基本上包括隐藏复选框并根据需要创建一个元素和样式，然后在显示checkbox时是否显示它或隐藏它。

在您的情况下，您可以在复选框旁边创建一个元素，设置它并将其隐藏，然后在添加.multiple-of-3类时显示它， 或者只是隐藏checkbox类中的multiple-of-3（根据您在链接中提供的示例）：

<强> app.component.html

<label [ngClass]="{'is-multiple-of-3':multipleOf3}">
  <span id="redSquare"></span>
  <input type="checkbox" name="rememberLogin" id="buttonId"  (click)="open()"> click me
</label>

<强> app.component.css

/* if you want to create an element on top of the checkbox */
#redSquare{
  width: 13px;
  height: 13px;
  background: red;
  display: block;
  margin-bottom: -16px;
  z-index: 99;
  position: relative;
  left: 4px;
  visibility: hidden;
}

.is-multiple-of-3 #redSquare{
  visibility: visible;
}

/* if you want to simply hide it */
.is-multiple-of-3 checkbox{
  display: none;
}