I am facing an issue with styling a standard HTML checkbox when it is in an error state. Since it's not possible to style the checkbox directly, I am attempting to apply the styling to its parent div instead.
Consider this example:
<div class="form-row">
<input type="checkbox" name="checkbox" class="required">
</div>
<div class="form-row">
<input type="text" name="text" class="text-input required">
</div>
Currently, I am able to style the error on the text input using CSS like this:
.text-input .error {
background-color: red;
}
However, applying similar styling to checkboxes has been a challenge. I attempted to use jQuery to target the parent of the checkbox and style it only when the checkbox has an error (for text inputs, I can simply use the CSS above):
$("form-row:has(input[type='checkbox'] error)").css("background-color", "red");
Unfortunately, this approach does not work as expected. There are no errors returned, but the parent element does not get styled. How can I effectively style the parent div only when the child checkbox has the error class?