CSS video tutorial: Customize checkboxes in CSS

One of the problems that we encounter quite early when working on CSS is the inability to style certain form elements such as checkboxes or radios. Also, if you want to create a specific interface for this type of control, you will have to be creative and work around the problem.

The solution is to use the pseudo-element :: before and :: after in order to create virtual elements that will replace the interface of our checkbox. However, we will keep the original input in the HTML structure so as not to affect accessibility.

    
     
        
        I accept the general sales conditions
     

The HTML structure is relatively classic and we will use the neighbor selector to change the appearance of a pseudo-element when the box is checked or when it has the focus.

  / * At checked * /
 .form-check input: checked + label :: before {}
 / * In focus * /
 .form-check input: focus + label :: before {}

Then it's up to you to be creative about how you want your items to look. However, be careful not to deviate too much from the initial style;]