Click event on checkbox not handled because of CSS animation

Question

I have an input and a checkbox, when the input is focused it display some information under it.

The problem is : when those information are displayed if I click on the checkbox it hides the information (because my input is not focused anymore) but the checkbox is not checked.

Here is a working plunker which reproduce this behavior.

Is there a way to make the checkbox checked in this scenario ?

EDIT :

I think the problem is because the input loose the focus on the event mousedown and the checkbox is checked on the event mouseup (or maybe click) so when the mouseup event is fired the input has already lost the focus so the message under it is hidden and the checkbox moves up. So when the mouseup event is fired the cursor is not anymore on the checkbox, that's why the checkbox is not checked.

Answer 1

Nothing in pure CSS. You would need to bind focus event on JS.

Something like this:

var input = document.querySelector('#input');

input.addEventListener('focus', function() {
  this.classList.add('focus');
});

And then change your CSS from :focus to .focus

Answer 2

My solution for your question is attached here. This is a simple way. I have added JQuery code to it. You can try this code. I have written this code using JSFiddle. The link is given below:

[https://jsfiddle.net/679g9p6p/1/][1]

If you want to hide the information when focus out from the textbox, then you can try this code given below:

[https://jsfiddle.net/xxsL2e03/100/][2]