Custom checkbox

Why do you need the label to surround the input? You don’t show an example of what you are trying to achieve.

The code is perfectly valid as it is and indeed including the input inside a label used to have issues with screen readers so i avoid that construct anyway.

As long as the label ‘for’ attribute matches the input ID then its perfect. The label and input will be related and the label will still activate the input.

If you need to reorder the html for styling purposes then you are probably doing something wrong.

Note that the technique for the checkbox replacement relies on the input being before the label so that it can be activated with a general sibling or adjacent sibling selector when checked.

If you can explain what problem you are having them we may be able to suggest a solution :slight_smile:

Note that there is a method (modern browsers only) to change the checkbox appearance without replacing it or using the sibling combinator.

(I updated example 2 in the demo to use a nested input inside a label although I still advise the first example as proper usage.)