Скрытие флажка и создание настраиваемой кнопки

Question

Я пытаюсь скрыть флажок, но все же разрешаю ему проверять нажатие кнопки div /. Мой код для пользовательских кнопок:

<div class="checkbox flex item  center-text  bg-theme" 
style="border: 1px solid #e3e3e3;border-radius: 12px;">
<i class="twf twf-round-pushpin"></i> 
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" >

Я пробовал добавить visibility:none и display:none;, но это просто не работает, когда я нажимаю кнопки, ничего не происходит .

Answer 1

Добавьте display:inline-block к первому div, чтобы он занимал только минимальное место и не оставлял большого пробела.

Затем для флажка использование display:none отлично работает, I ' Мы добавили обратный вызов onclick для регистрации состояния флажка при каждом щелчке по ярлыку.

Попробуйте этот пример:

<div class="checkbox flex item  center-text  bg-theme" style="border: 1px solid #e3e3e3;border-radius: 12px; display:inline-block;">
    <i class="twf twf-round-pushpin"></i> 
    <label for="nearest" class ="color-theme right-5">Nearest to me </label>
    <input type="checkbox" id="nearest" class = "filtering" value="nearest"  style="display: none;" onclick="console.log(this.checked)">
</div>

Answer 2

Вы можете попробовать добавить opacity:0; в css. Если вы не хотите, чтобы поле становилось отмеченным напрямую, используйте pointer-events:none в дополнение к