Help changing label colours when radio button is checked

This thread is resolved. Here is a description of the problem and solution.

Problem:

A user asked how to style the selected/active radio type field's label in the search form.

Solution:

Shared some custom CSS and JS code examples for this.

Relevant Documentation:

n/a

This support ticket is created 2 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Toolset Blocks, Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by glennN 2 years, 7 months ago.

Assisted by: Waqar.

Author

Posts

March 24, 2022 at 3:15 am #2325539

glennN

Tell us what you are trying to do?
Change label colours when radio button is checked

Is there any documentation that you are following?
Yes, stack overflow but couldn't solve the issue

Is there a similar example that we can see?
I have attached a screen showing the label pink when checked from a design mockup

What is the link to your site?
hidden link

March 24, 2022 at 5:42 am #2325609

Waqar

Hi,

Thank you for contacting us and I'd be happy to assist.

To add a different style to the selected radio field's label, you'll need some custom JS code, which detects which of the radio field item is checked and adds a class "active" to that field's label element. For example:


jQuery( document ).on( 'js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated ready', function( event, data ) {
  jQuery('.wpv-filter-form #project-radio .radio > label > input[type="radio"][checked="checked"]').parent().addClass('active');
});

Note: You can include this script in your view's JS editor.

After that, you'll be able to use custom CSS code, to change the color of that label with the class "active":


#project-radio label.active {
    color: #cb95c3;
}

regards,
Waqar

March 25, 2022 at 7:09 am #2326671

glennN

My issue is resolved now. Thank you!