How to highlight DOM elements with CSS?

  • Profile Image
    Emerg
    Asked on March 17, 2021 at 05:12 PM

    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:

    1616015391_6052701f68919_

    These do not highlight:

    1616015420_6052703c531c4_

    Here's the code I have inserted:

    1616015306_60526fcab90c9_

    Thank you for your help!

    Kymber

  • Profile Image
    Lorenz_A
    Answered on March 17, 2021 at 11:54 PM

    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.

  • Profile Image
    Emerg
    Answered on March 18, 2021 at 10:03 AM

    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.

  • Profile Image
    Yau_C
    Answered on March 18, 2021 at 11:54 AM

    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):

    1616082645_605376d589810_

    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,

  • Profile Image
    Emerg
    Answered on March 18, 2021 at 12:05 PM

    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.

    1616083157_605378d51224c_


  • Profile Image
    FelipeSantana
    Answered on March 18, 2021 at 05:03 PM

    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):

    1616101140_6053bf1469dbb_

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

    1616101255_6053bf87d29d9_

    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.