Así que tengo un div que aparece/desaparece al hacer clic en la casilla de verificación.
<input type="checkbox" id="btn"> <div id="box"></div> #box { display: none; width: 100px; height: 100px; } #btn:checked + #box display: block; }Pero también quiero agregar una opción para cerrarlo haciendo clic en cualquier lugar fuera de este cuadro. ¿Cómo puedo hacerlo?
Verifique el siguiente código. Puede usar label for lograr este comportamiento. Haces clic en un cuadro fuera de la casilla de verificación y se marca como querías.
label { display: block; margin-top: 100px; width: 200px; height: 200px; background: limegreen; } #btn:checked~#box { display: block; } #box { margin-top: 50px; display: none; width: 200px; height: 200px; background: red; } <input type="checkbox" id="btn"> <label for="btn"></label> <div id="box"> </div>