How to highlight DOM elements with CSS?

Hi,

Trying to highlight the areas specific people need to complete based on the status they indicate in my form. The code I have doesn't seem to be working for all sections.

For example, if I am an administrator 1:

These do not highlight:

Here's the code I have inserted:

Thank you for your help!

Kymber

Greetings,

You may try using the ":checked" function in the CSS.

For more information, kindly please check this guide https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

Please give it a try and let us know how it goes.

It isn't working, also the areas that aren't highlighting if required aren't all checked boxes, some are text areas.

Perhaps my code is wrong, i'm not familiar with CSS much.

Hi,

You only provided 'border-color', but you didn't specify:

• border width
• border style

In order for a border to show up you need something like:

border: 5px solid orange;

I am not 100% sure where/what you want to highlight.

Do you want to highlight the text only (to be completed by admin):

or the input boxes and 'textareas' as well?

I think this highlight approach can be avoided.

A better approach would be to use conditional-logic to show/hide the relevant field(s) based on input from the user.

Regards,

Hi,

Sorry, i'll clarify - essentially I want to highlight the areas that need to be completed by different people.

For example, if I am the admin, and I select admin in the first question I have in my form - I want all of the necessary fields to "glow" orange/red.

I've set up conditional logic to show/hide, however I will have users that will see sections of the form that is already completed - so in order to make sure they know which section they need to complete, i'd like to highlight them.

Basically, user 1 completes a portion of the form, user 2 goes in and completes another section ...etc.

In the image below, I want the input boxes and text areas to have a border colour.

Hello @Emerg,

Thank you for the clarification.

First, I'd like to mention that it is not currently possible to conditionally apply CSS styles to your form fields. However, what you can do is target the exact field and its internal elements to apply style changes and then hide those fields. This way, when the field is shown, it will appear with its corresponding styles.

I went ahead and built a short sample form that should help with this process. My form asks who is filling the form "Employee" or "Admin". Based on the answer a different table appears.

I have used the Advanced Designer to change the background color of the label of both tables. The Admin table has a light green background, and the Employee table has a light blue background.

Here is a screen recording of how you can target the exact labels of a field (double click on the element):

Then, I created two conditions that will show the specific table based on who is filling the form (this is one of them).

And here is the final product. Feel free to test this for yourself and clone it so you can see how it is built.

Sample Form - https://form.jotform.com/210635589330052

You can take the basic steps I used in this form and apply them to your own.

Please let us know if you have any further questions or concerns, we are always happy to help.