Переключатель не остается включенным, когда я нажимаю другие компоненты ⇐ CSS

[Anonymous]

Я написал код HTML следующим образом:

Код: Выделить всё

[i]

[/i]
[i][/i]

[i]

[/i]
[i][/i]

И CSS такой:

Код: Выделить всё

.add_task_radio {
position:relative;
display: none;
}
.button_space .bi-check-circle,.add_task_container .bi-check-circle,.add_task_radio_icon .bi-check-circle {
display:none;
}
.button_space:hover .bi-check-circle,
.add_task_radio_icon:hover .bi-check-circle,
.add_task_radio_icon:active .bi-check-circle,
.add_task_radio_icon:checked .bi-check-circle,
.add_task_radio_icon:focus .bi-check-circle {
display:inline;
}
.button_space:hover .bi-circle,
.add_task_radio_icon:hover .bi-circle,
.add_task_radio_icon:active .bi-circle,
.add_task_radio_icon:checked .bi-circle,
.add_task_radio_icon:focus .bi-circle {
display:none;
}

Изменение радиометок работает нормально. Проблема в том, что отмеченная метка переключателя снимается, когда я пытаюсь ввести имя ввода или щелкнуть где-нибудь еще. Как с этим справиться?

Подробнее здесь: https://stackoverflow.com/questions/791 ... components