时间戳

首页 > 解决方案 > 如何设置复选框内容？

html - 如何设置复选框内容？

问题描述

在我的角度应用程序中。我正在使用复选框。我从 API 获取数据。如果复选框的值为真。输入值的内容显示一个勾号。如果值为 false 而不是空复选框，我如何在复选框中显示“X”。请指导我。

HTML

 <input class="input" [ngclass]="testForm.get('test').value === false?'unchecked':none " type="checkbox" formControlName="test" readonly>

css

.unchecked {
  content: 'X';
  color: #fff;
}

标签： htmlcssangular

解决方案

演示 您可以为此使用 css

<div>
    <input class="input" id="checkbox-1"class="checkbox-custom" type="checkbox"  readonly>
    <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>

作为CSS

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    background: blue;
    color: #fff;
}

#checkbox-1{
   opacity: 0;
    position: absolute;  
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    display: inline-block;
    vertical-align: middle;
    width: 14px; 
    height: 14px;
    padding: 3px;
    text-align: center;
    content: "\f00d";
    font-family: 'FontAwesome';
    background: red;
    color:white;
}

推荐阅读