Checkbox required but "An invalid form control with name='terms' is not focusable."

I have done a checkbox required by HTML, the problem is that the default checkbox is display:none by CSS because I have replaced it to shown it using a :before icon for a better designed checbox icon.

But now, as the checkbox is not displayed, I get that HTML. How can I say to HTML that the checbox to show the validation alert is the new one by :before CSS icon?

Thanks

http://prntscr.com/jvvyu6