Skip to Content (Press Enter)
UserImage.jpg
Stefan de Vaan
161Views
2Comments
Solved
Make Checkbox border red if checkbox is not valid
Question
Reactive
Application Type
Reactive

Hey everyone,

I have made an form with alot of questions with checkboxes. Now i have one question in the form that the checkbox border need to be red if the checkbox is not valid. so not all of them. I tried alot of things with a webblock and with my junior CSS styling skills inside the widget but i didn't get the solution.

I think the solution has to be in CSS but i am not sure. So is my question is this possible? and if its possible how i add an boolean var to CSS?

[data-checkbox]:before {

Border-color: red;

}

This is what i need but then the [data-checkbox] need to be variable.


Thank you in advance!

Stefan


0
0
28 Jun 2022
Copy Link
2019-09-30 07-35-56
Aurelio Junior
Solution

Hello Stefan,

This CSS sets the checkbox's border to red when you set it as invalid in your form validation logic:

input[type='checkbox'].not-valid:before {
    border: 1px solid red;
}

0
0
28 Jun 2022
Copy Link
UserImage.jpg
Stefan de Vaan

Thank you CSS master

0
0
28 Jun 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.