checbox 콘텐츠를 설정하는 방법은 무엇입니까? [복제]
Aug 21 2020
내 각도 앱에서. 체크 박스를 사용하고 있습니다. API에서 데이터를 가져옵니다. 확인란의 값이 참인 경우. 입력 값의 내용에 눈금이 표시됩니다. 값이 비어있는 확인란이 아니라 거짓 인 경우 확인란에 "X"를 표시하려면 어떻게해야합니까? 저를 안내 해주세요.
HTML
<input class="input" [ngclass]="testForm.get('test').value === false?'unchecked':none " type="checkbox" formControlName="test" readonly>
CSS
.unchecked {
content: 'X';
color: #fff;
}
답변
1 pc_coder Aug 21 2020 at 17:05
데모 당신은 이것을 위해 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;
}