Why are the options in the Products field turning grey entirely when one option is selected?

  • Profile Image
    nikkib312
    Asked on November 15, 2017 at 10:07 AM

    I've tried playing around with the color options in Design but I can't seem to get the options in the "Choose Your Ad" section of my form to stay lit up even after a selection is made. (Note: you must choose Personal or Business ad first to make the conditionals work.)  I wouldn't mind if the options not selected were greyed out but I at least would like for the option that IS selected to be highlighted in some way. When I click elsewhere in the form, the options light up again and I can only tell what was selected by the little "dot" toggle. Some people are confused by what they have actually selected. Just need to be pointed in the right direction as to where to make the color adjustments (and happy to hear some suggestions about what colors to use so I get the desired effect).

     

  • Profile Image
    Jan
    Answered on November 15, 2017 at 11:37 AM

    I was able to replicate the issue when I opened your form. Here's a screen capture:

    1510763052box1.gif

    You can fix this by inserting this CSS code:

    .form-product-item.hover-product-item {
    color: white;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    1510763155box2.gif

    Hope that helps. Thank you.

  • Profile Image
    nikkib312
    Answered on November 15, 2017 at 11:41 AM

    This is fantastic. As a follow-up, is there a way to have it grey out all the options NOT selected and just keep the one selected in white? Or is that not possible? Alternatively, is there a way to make the option that IS selected highlighted or bolded or something while the options not selected remain as is? The dot obviously marks the selection but it is not as obvious as it could be. Thank you!

  • Profile Image
    TREVON
    Answered on November 15, 2017 at 01:50 PM

    Thank you for contacting us.

    Kindly allow us more time to get the right CSS codes that will work for your setup.

    I will update you on this thread with the right CSS for the form.

  • Profile Image
    TREVON
    Answered on November 15, 2017 at 03:44 PM

    Thank you for contacting us and for your patience. I have re-looked at the issue and I have noticed the section you want to implement the changes is a payment element and some elements do not have "checked" attribute which becomes a challenge when checking if a radio button is checked hence  implementing the option of checking if radio button has been selected may pose a challenge.

    I have tried adding other attributes that shows you have selected the radio button but immediately you release your mouse it disappears. This may be close to what you wanted to achieve. Kindly test it below and if you would want to implement it kindly add the following css to your form.

    .form-product-item-detail:active {
        background :  #660006;
    }

    Below is a clone of your form with the above CSS

    https://form.jotform.com/73184680407964

    Kindly feel free to clone the form and use is.

    Here is a guide on how to inject CSS to your form

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Kindly do let us know if the above solution would work for you.



  • Profile Image
    nikkib312
    Answered on November 16, 2017 at 12:45 PM

    Trevon, I see how that code makes it quickly highlight in red for a moment once selected. I like that and the only further change I wonder about is using a transparency. That is, lets say I wanted to use the color white #ffffff instead of the reddish color you used above (#660006). I would want it to be a bit transparent so if I wanted 50% transparency, I would code it #80ffffff.

    But the CSS seems to only recognize the first 6 characters after the hashtag. Is this a limitation or am I missing something here about using a transparency prefix in front of the color?

  • Profile Image
    Mike_G
    Answered on November 16, 2017 at 02:37 PM

    If you want to make the background transparent you can use the Opacity property. — https://www.w3schools.com/css/css_image_transparency.asp

    And to put more emphasis on the selected option, here is my suggestion:

    .form-product-item-detail:active {

        background: #e5eeef;

        opacity: 0.5;

        color: black;

        font-weight: bold;

        font-size: 18px;

    }

    I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.