So I have a div that appears/disappears on clicking checkbox.
<input type="checkbox" id="btn">
<div id="box"></div>
#box {
display: none;
width: 100px;
height: 100px;
}
#btn:checked + #box
display: block;
}
But I also want to add an option to close it by clicking anywhere outside this box. How can I do it?
Check the below code. You can use label for to achieve this behavior. You click a box outside of checkbox and it gets checked as you wanted.
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>