What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Show label when you tab to new field

    Asked by darienlibrary on March 23, 2016 at 05:02 PM

    My form is designed so that when you move your mouse over a field, everything else fades out to 0.5 opacity. This works brilliantly. But when I'm in the form and I tab to the next field, that input field's opacity is back to 1 as intended. But the label stays at 0.5. 

    Here's the CSS I have so far: 

    /* How to fade out content */

    ul:hover li {

        opacity : 0.5;

    }

     

    ul:hover li:hover {

        opacity : 1;

    }

     

    Any suggestions? I found a CodePen which appears to do what I want, but they're using LESS.

    Page URL:
    https://form.jotform.com/60456494425157

    Screenshot
    label next content move
  • Profile Image
    JotForm Support

    Answered by Boris on March 23, 2016 at 06:48 PM

    The exact behavior depicted in that CodePen can't usually be achieved on the structure such as that of our forms, because CSS can't affect parent elements based on what is going on inside its children elements.

    In that CodePen example, they are using an overly simplistic model where the input element is placed just before the label element, and they are siblings. This is the only structure where such CSS could work:

    > question container
    >> input-field
    >> label-for-input-field

    As both the input and label elements are on the same level (they are siblings) and input field is before the label, the label can see the :focus state in their example:

    > question container
    >> input-field:focus
    >> label-for-input-field

    This allows them to use CSS such as:

    input-field:focus ~ label-for-input-field {
        opacity: 1;
    }

    On our forms, the structure of the form is much more complex, and the label and input fields are neither on the same level, nor is the input field before the label. This makes it impossible to style labels based on focus state on the input fields, with pure CSS alone.

    Here is a general structure of our simple form fields, which differs on more complex fields:

    > question container
    >> label-for-input-field
    >>
    container of input fields

    >>> input-field

    The reason we have another container after the label is because we can have multiple input fields there, such as "first name" and "last name". As you can see, in the above structure, the label is (1) before the input element and (2) on a parent level, which makes it not possible to target by CSS.

    Luckily, we have implemented a JavaScript workaround on our forms, so we add a .form-line-active class to the main question container whenever an input field inside of it has focus. This allows us to use CSS such as this:

    .form-line-active {
        opacity : 1 !important;
    }

    Simple, don't you think? :)

    Please try it out, and let us know if it works to your satisfaction.