Why is my radio button css not working correctly?

  • Profile Image
    Advolink1
    Asked on December 07, 2017 at 04:36 PM

    Hello!

    Dealing with a fairly simple form using three images as radio buttons. 

    1.  I have elected to spread the radio buttons to columns and all looks fine while building form.

    2.  When I actually execute the form, the CSS appears to be being ignored.

    3.  Additionally, when I select one of the radio button options, the background color behind the radio button widget changes colors. (See image)  Why?

    Thank you.

    Denise1512682441#3.jpg


  • Profile Image
    Richie_P
    Answered on December 07, 2017 at 05:43 PM

    Hi, It seems your screen shot did not go through kindly check this guide:How-to-Post-Screenshots-to-Our-Support-Forum

    But if the output you wanted looks like this,

    you can add this css codes in to your form.


    #label_input_7_0 img{
      margin-left: -40px;
    }
    #label_input_7_1 img{
      margin-left: 250px;
    }
    input#input_7_1.form-radio{
      margin-left: 280px;
    }


    #label_input_7_2 img{
      margin-left: 550px;
    }
    input#input_7_2.form-radio{
      margin-left: 570px;
    }
    .form-line.form-line-active{
      background-color: transparent;
    }

    I also changed the background so when it is clicked it wont get highlighted.

    Here is a guide on how to insert custom css in your form:How-to-Inject-Custom-CSS-Codes


  • Profile Image
    Advolink1
    Answered on December 07, 2017 at 06:46 PM

    Thank you, Richie. 

    One more thing...I would like the radio button label to be inline and not wrap.  Can you help me with this, please?

    D

  • Profile Image
    Kevin_G
    Answered on December 07, 2017 at 09:05 PM

    Inject the following CSS code to display the labels as desired: 

    .form-label {

        width: 100% !important;

    }

    I hope this helps. 

  • Profile Image
    Advolink1
    Answered on December 07, 2017 at 09:12 PM

    Hi, Kevin!

    It is not working!  Here's form:  https://form.jotform.com/73406144953154

    D

  • Profile Image
    Jed_C
    Answered on December 08, 2017 at 09:41 AM

    Hi Denise,


    Apologies for the late response. I looked into your form and I can see that the radio button label is already displaying inline. Not sure if it was already modified by you?

    Here's what I see:

    1512743867inline.png


    Let me know if that's what you are trying to achieve.


    Best,

    Jed

  • Profile Image
    Advolink1
    Answered on December 08, 2017 at 11:00 AM

    Jed,

    Yes!  I am anal enough to stick it out and found the answer in previous Jotform answers.  Thank you so much and forgive me for not communicating the issue was resolved.

    I appreciate your customer service and don't want to waste your time.

    Blessings.

    Denise