I want to reomve cross on buttons and also button background become green when option is selected

  • gabrielmelgacocosta
    Asked on February 3, 2023 at 3:46 AM

    https://www.jotform.com/form/230325699874469


    I want to reomve cross on buttons and also button background become green when option is selected

    aHR0cHM6Ly93d3cuam90Zm9ybS5jb20vdXBsb2Fk Screenshot 10

  • Olivia JotForm Support
    Replied on February 3, 2023 at 5:52 AM

    Hi Gabriel,

    Thanks for reaching out to Jotform Support. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

    Thanks for your patience.

  • Olivia JotForm Support
    Replied on February 3, 2023 at 6:25 AM

    Hi Gabriel,

    Thank you for your patience. You can remove the cross and change the button's color after clicking on it easily. Let me show you how to do it:

    1. In Form Builder, select the field of the Line Radio Buttons widget on your form.

    2. Click on the Wand icon and go to the Custom CSS tab at the top of the field that showed up.

    3. Copy and paste the code below into the field:

    .iradio_line-orange.checked {
    background-color: #2fbd0d;
    }
    .iradio_line-orange.checked .icheck_line-icon {
    display: block;
    }
    .icheck_line-icon {
    display: none;
    }


    4. Now, click on Update Widget to save your changes and apply the same steps to the other widget.

    1675423259 63dcee1be54ad  Screenshot 10


    This is how the buttons will look when they are selected:

    1675423392 63dceea01ed45  Screenshot 21

    Give it a try and let us know how it goes.

  • gabrielmelgacocosta
    Replied on February 3, 2023 at 8:46 AM

    This check sign will not show

    1675431890 63dd0fd2b8af1  Screenshot 10

  • Bryan JotForm Support
    Replied on February 3, 2023 at 9:10 AM

    Hi Gabriel,

    Thanks for getting back to us. I cloned your form titled Assistance Flash to see if I can replicate the issue, but I was able to see the check icon. Check out the screencast below to see the result on my end:

    1675432173 63dd10ed7a6ff  Screenshot 10

    If you want to remove the tick icon, you can do it easily by injecting the CSS Code below into the widget:

    1. In Form Builder, click on the Line Radio Buttons widget.
    2. Click on the Wand icon on the right side of the widget.
    3. In the menu that opens on the right side of your screen, click on Custom CSS.
    4. Paste the CSS Code below into the box:

    .iradio_line-orange.checked .icheck_line-icon {
        display: none;
    }

    5. Click on Update Widget on the bottom-left side of the box.

    1675432872 63dd13a8e8506  Screenshot 21

    Don't forget to inject the CSS Code into all the Line Radio Buttons widgets. Check out the screencast below to see the result:

    1675433384 63dd15a8a8548  Screenshot 32

    Let us know if there’s anything else we can help you with.