Change Background Color Based On Selected Button

[Diego]

I am customising the radio buttons of gravity forms, by hiding the radio and showing buttons. I would like to change the background color of the all button  based on the selected button. For example if I select Button A the color of A and  all other selected button will be BLU, if I select Button B the color of B and  all other selected button will be GREEN and if I select Button C the color of C and  all other selected button will be BROWN. 

I've been struggling for days. Can someone help me please? Here the CSS I wrote:

 

.gform_wrapper ul.gfield_radio li input[type="radio"] {
display:none;
}
 

/* Button 1 2 3 4 5 */

#field_2_1 ul.gfield_radio li input[type="radio"] + label {
    border: 1px solid #d1d1d1;
    color: #d1d1d1;
    background-color: #white;
    width: 90px;
    height: 50px;
    border-radius: 5px;
    margin-left: 3px;
    text-align: center;
    padding-top: 14px;
}

/* Button A B C */

#field_2_2 ul.gfield_radio li input[type="radio"] + label {
    border: 1px solid #d1d1d1;
    color: #d1d1d1;
    background-color: #white;
    width: 191px;
    height: 50px;
    border-radius: 5px;
    margin-left: 3px;
    text-align: center;
    padding-top: 14px;
}

/* Button 1 2 3 4 */

#field_2_23 ul.gfield_radio li input[type="radio"] + label {
    border: 1px solid #d1d1d1;
    color: #d1d1d1;
    background-color: #white;
    width: 141px;
    height: 50px;
    border-radius: 5px;
    margin-left: 3px;
    text-align: center;
    padding-top: 14px;
}

/* SELECTED BUTTON STYLE */

#gform_wrapper_2 ul.gfield_radio li input[type="radio"]:checked + label {
    border: 1px solid #b0ca1f;
    color: white;
    background-color: #b0ca1f;
    font-weight: normal !important; 
}

[nightowl]

Hi Diego,

You can try using this script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
    jQuery(document).ready(
        function ()
        {
            var selectorButton = jQuery('#field_2_2 ul.gfield_radio li input[type="radio"]');
            selectorButton.click(highlightSelectedButtons);
        }
    );

    function setBackgroundColors(color)
    {
        var selectedGroupAButton = jQuery('#field_2_1 ul.gfield_radio li input[type="radio"]:checked + label');
        var selectedGroupBButton = jQuery('#field_2_2 ul.gfield_radio li input[type="radio"]:checked + label');
        var selectedGroupCButton = jQuery('#field_2_23 ul.gfield_radio li input[type="radio"]:checked + label');

        selectedGroupAButton.css('background-color', color);
        selectedGroupBButton.css('background-color', color);
        selectedGroupCButton.css('background-color', color);
    }

    function removeBackgroundColors()
    {
        var selectedGroupAButton = jQuery('#field_2_1 ul.gfield_radio li input[type="radio"] + label');
        var selectedGroupBButton = jQuery('#field_2_2 ul.gfield_radio li input[type="radio"] + label');
        var selectedGroupCButton = jQuery('#field_2_23 ul.gfield_radio li input[type="radio"] + label');

        selectedGroupAButton.css('background-color', '');
        selectedGroupBButton.css('background-color', '');
        selectedGroupCButton.css('background-color', '');
    }

    function highlightSelectedButtons(event)
    {
        if (jQuery(this).is(':checked'))
        {
            var selectedButton = jQuery(this).val();
            switch (selectedButton)
            {
                case 'Your label for Button A':
                    setBackgroundColors('blue');
                    break;

                case 'Your label for Button B':
                    setBackgroundColors('green');
                    break;

                case 'Your label for Button C':
                    setBackgroundColors('brown');
                    break;

                default:
                    removeBackgroundColors();
                    break;
            }
        }
        else
        {
            removeBackgroundColors();
        }
    }
</script>

 

[Diego]

Hi nightowl,

many thanks for replying and taking your time to  code for me.

I've added the script at the head of theme, but nothing seems working.

Is there anything I should modify before paste it?

Thank you

 

 

[nightowl]

Hi Diego,

It depends. The mere fact that you're using Gravity Forms means that you're using WordPress. Can you provide the URL of the WordPress post/page where you're trying to embed my code?

-nightowl

[Diego]

Hi nightowl,

yes, that's correct. I'm using Wordpress and DIVI builder and Gravity Forms. Here the URL of the website:  https://book2clean.co.uk/pricing/

Diego