1

In my angular app. I am using checkboxes. I get my data from API. If the value of the checkbox is true. the content of the input value shows a tickmark. How can i display a "X" in the checkbox if the value is false instead of empty checkbox. please guide me.

HTML

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

css

.unchecked {
  content: 'X';
  color: #fff;
}
rja
  • 169
  • 2
  • 14
  • https://stackoverflow.com/questions/40123695/after-selecting-check-box-instead-of-tick-symbol-need-x-in-html – flakerimi Aug 21 '20 at 09:47

1 Answers1

1

Demo You can use css for this

<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>

as 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;
}
mr. pc_coder
  • 16,412
  • 3
  • 32
  • 54
  • Hi, Thanks for your reply. I want to set the above css only if the value of input is false. this value comes form backend. It is not a user-input. – rja Aug 24 '20 at 05:15