CSS TIP: Send form only with active GDPR checkbox

[horst]

... ...and show it visually!

Following is a snippet, not a tutorial. But maybe it is useful for someone.

Everyone knows the possibility to define a checkbox as required. However, a submit button would then visually execute the click movements and show the active color on hover.

Depending on the status of the checkbox, you can either disable the functionality of the submit button via CSS ( pointer-events: none; ), or display a not-allowed cursor. But IMO, each of the two is asking for the other. If you embed the button in a wrapper element, you can marry both of them together.

 

<fieldset class='gdprconsent'>
	<input type='checkbox' name='gdprconsent' id='gdprconsent' required='required' autocomplete='off' />
	<label for='gdprconsent'>I agree to the privacy policy.</label>
	<div class='submitWrapper'>
		<input type='submit' name='submit' id='submit'  value='Submit'>
	</div>
</fieldset>

#gdprconsent:not(:checked) ~ div.submitWrapper {
	cursor: not-allowed;
}
#gdprconsent:not(:checked) ~ div.submitWrapper > input[type='submit'] {
	pointer-events: none;
}
#gdprconsent:checked ~ div.submitWrapper > input[type='submit'] {
	cursor: pointer;
}