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

  • Profile Image
    gabrielmelgacocosta
    Asked on February 03, 2023 at 03: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

    1675413961_63dcc9c92be84_Screenshot-2023

  • Profile Image
    Olivia
    Answered on February 03, 2023 at 05: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.

  • Profile Image
    Olivia
    Answered on February 03, 2023 at 06: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_


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

    1675423392_63dceea01ed45_

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

  • Profile Image
    gabrielmelgacocosta
    Answered on February 03, 2023 at 08:46 AM

    This check sign will not show

    1675431890_63dd0fd2b8af1_

  • Profile Image
    Bryan
    Answered on February 03, 2023 at 09: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_

    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_

    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_

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