Используйте диапазон как замену флажку

Question

В Angular 9 реактивных формах у меня такая форма:

 
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <label for="active">Active</label>
      <input id="active" type="checkbox" formControlName="active"> 
      <button class="action" type="submit">Send</button>
    </form>

Вместо флажка я хотел бы отобразить интерактивный прямоугольник, который будет работать как флажок:

.active { padding: 20px; display: inline-block; }
.checked { border: 1px solid green; color: green; }

<span class="active checked">Active</span>

Как я могу это сделать?

Answer 1

input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

label {
  border: 1px solid transparent;
  display: inline-block;
  padding: 20px;
  cursor: pointer;
}

input:checked+label {
  border-color: green;
  color: green;
}

<div>
  <input id="my-input" type="checkbox">
  <label for="my-input">Active</label>
</div>

Answer 2

Вы имеете в виду что-то вроде этого?

.control-me::after {
    content: "?";
    font-size: 100px;
}
#toggle:checked ~ .control-me::after {
    content: "?";
}

label {
    background: #A5D6A7;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.visually-hidden {
    position: absolute;
    left: -100vw;
    
    /* Note, you may want to position the checkbox over top the label and set the opacity to zero instead. It can be better for accessibilty on some touch devices for discoverability. */
}

body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    text-align: center;
    font: 900 24px/1.4 -system-ui, sans-serif;
}

<div>
    <label for="toggle">Toggle</label>
    
    <input type="checkbox" id="toggle" class="visually-hidden">

    <div class="control-me"></div>
</div>

Не стесняйтесь скопировать этот код и изменить код CSS, чтобы улучшить его, или сделайте кнопку «Активная» зеленой. Я хочу помочь вам с вашим кодом! Вы можете отправить мне письмо по электронной почте: diffycops@gmail.com