Jump to content

Change Background Color Based On Selected Button


Recommended Posts

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; 
}

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...