How can I highlight all fields, when active, the same way?

  • Profile Image
    Danielle_Kennedy
    Asked on June 26, 2021 at 12:54 AM

    All of the fields on my form highlight correctly, like this (Business name):

    1624683045_60d6b225b10f5_Correct.jpg

    Except for one text area (How can I help?) which retains the original colour border when active:

    1624683082_60d6b24a533f5_Incorrect.jpg

    Form is here: https://form.jotform.com/211742251782049

    Many thanks in advance,

    Danielle

  • Profile Image
    Gaetan_B
    Answered on June 26, 2021 at 07:28 AM

    Hello,

    Thank you for reaching out.


    Could you add the following code to your CSS? It should do the trick and force the colors to be the same.

    .form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover {
    border-color: #a9bff9;
    box-shadow: 0 0 0 2px #c9d8fe;
    }


    Should that not work by default, you can change the two lines by:

     border-color: #a9bff9 !important;
    box-shadow: 0 0 0 2px #c9d8fe !important;



    Best regards

  • Profile Image
    Danielle_Kennedy
    Answered on June 27, 2021 at 12:19 AM

    Hi,

    Thanks for the advice.

    I'm trying for two settings - the hover settings as below with colour #D1D1F9, then if the item is clicked or an entry is being made, I want border colour #2D3066 and shadow colour #D1D1F9.

    I've added this CSS

    .form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover {

      border-color : #D1D1F9 !important;

      box-shadow : 0 0 0 2px #D1D1F9 !important;

    }

    Plus:

    .form-dropdown:active, .form-textarea:active, .form-textbox:active, .signature-wrapper:active {

      border-color : #2D3066 !important;

      box-shadow : 0 0 0 2px #D1D1F9 !important;

    }

    Now with hover, or if an entry is being made both border & shadow = #D1D1F9 like this;

    1624767287_60d7fb37b4202_Form entry.jpg

    As I click on the box, I get colour settings for "active" above;

    1624767358_60d7fb7ea4ab1_Click.jpg

    But if I move the cursor away, the border changes to a lighter bright blue;

    1624767424_60d7fbc00cef0_click no hover.

    How do I get the two colour settings I'm looking for - one for hover, and one with the darker border if the box has been clicked or an entry is being made?

    Many thanks in advance.


  • Profile Image
    Patrick_R
    Answered on June 27, 2021 at 08:41 AM

    Hello! The focus selector should solve this problem. Please check this form: https://form.jotform.com/211773761909969

    If this solves your issue, then you can use the following CSS code:

    .form-dropdown:focus, .form-textarea:focus, .form-textbox:focus, .signature-wrapper:focus {
        border-color : #D1D1F9 !important;
        box-shadow : 0 0 0 2px #D1D1F9 !important;
    }

    In case this doesn't solve your purpose or if you have any further questions, let us know.

    Thank you!

  • Profile Image
    Danielle_Kennedy
    Answered on June 27, 2021 at 07:13 PM

    That is perfect, thank you!