Help changing label colours when radio button is checked

Ce fil est résolu. Voici une description du problème et la solution proposée.

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 Il y a 2 années et 8 mois. 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.

Aucun de nos assistants n'est disponible aujourd'hui sur le forum Jeu d'outils. Veuillez créer un ticket, et nous nous le traiterons dès notre prochaine connexion. Merci de votre compréhension.

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)

Marqué : Toolset Blocks, Views, Views plugin

Ce sujet contient 2 réponses, a 2 voix.

Dernière mise à jour par glennN Il y a 2 années et 8 mois.

Assisté par: Waqar.

Auteur

Publications

mars 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?
lien caché

mars 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

mars 25, 2022 at 7:09 am #2326671

glennN

My issue is resolved now. Thank you!