Tick mark size in checkbox

Question

In my Angular app. I am using a input type checkbox. I am trying to change the size the checkbox. I am able to increase the size of the checkbox. but, when checkbox is checked the size of tick mark appears very small and does not fit to the size of the checkbox. How can i increase the size of tick mark so that it can fit to the checkbox.

HTML

<input type="checkbox" class="customInput">

css

.customInput {
  width: 2em;
  height: 2em;
}

score 3 · Answer 1 · answered Sep 03 '20 at 07:04

Use custom elements to style your form inputs:

.form-input input {
    display: none;
}

.form-input .checkbox {
    border: 1px solid black;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    text-align: center;
}

.form-input input:checked + .checkbox:before {
    content: '\2713';
    display: inline;
}

<label class="form-input">
  <input type="checkbox"/>
  <div class="checkbox"></div>
</label>

Tick mark size in checkbox

1 Answers1