Change formatting of Multiple choice

  • Profile Image
    S_Lorusso
    Asked on June 01, 2020 at 11:50 AM

    Hello

    could you help me make some adjustments?

    I have both “Single Choice” elements and “Multiple Choice” elements.

    Per the image, the “Single Choice” element is the Yes/No question. – NO CHANGE

     

    I would like to change the “Multiple Choice” element as follows:

    ·      Circles to be squares

    ·      Squares to be the same color gray as the “Single Choice” element.

    ·      Check marks to be black


    1591026588Screen Shot 2020-06-01 at 8.41 to be black

  • Profile Image
    Jimmy_D
    Answered on June 01, 2020 at 01:54 PM

    To change the multiple choice element checkbox color please inject the CSS code below to your Form. 

    .form-checkbox-item:not(#foo) label:before{

      border:2px solid gray!important;

    }

    .form-checkbox-item:not(#foo) label:after{

          background-color: black;

        box-shadow:0 2px 0 0 #000, 2px 2px 0 0 #000, 4px 2px 0 0 #000, 6px 2px 0 0 #000;

    }

    Related guide.- How-to-Inject-Custom-CSS-Codes

    Let us know if you need further assistance. 

  • Profile Image
    S_Lorusso
    Answered on June 01, 2020 at 02:25 PM

    circles for Multiple choice are to be square.

  • Profile Image
    Jimmy_D
    Answered on June 01, 2020 at 03:51 PM

    To transform the multiple-choice checkbox into squares, apply this CSS code to your form.

    .form-checkbox-item:not(#foo) label:before{

      border-radius:0px!important;

    }

    Let us know if you have more questions. 

  • Profile Image
    S_Lorusso
    Answered on June 01, 2020 at 04:14 PM

    this did not work


  • Profile Image
    S_Lorusso
    Answered on June 01, 2020 at 04:18 PM

    I got it to work. Important was spelled incorrectly.

    Thanks all good now!

  • Profile Image
    Jimmy_D
    Answered on June 01, 2020 at 04:52 PM

    Marked as answered. Thank you message.