Skip Navigation

[Resolved] Style selected radio – custom search

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

Problem:
I've got a Custom Search using radio fields.
I want the checked radio label to be addressed with my custom CSS.
What is the class to address?

Solution:
1. Change your Filters to "raw" output in the Custom Filter Editor:
https://d7j863fr5jhrr.cloudfront.net/wp-content/uploads/2017/07/551574-ScreenShot.png?x71388

2. Address your Radio Buttons with something like this vanilla CSS3:

input[type="radio"]:checked+label { 
font-weight: bold; 
color:red;
} 

Relevant Documentation:
https://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label

0% of people find this useful.

This support ticket is created 6 years, 8 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.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 2 replies, has 2 voices.

Last updated by Rita 6 years, 8 months ago.

Assisted by: Beda.

Author
Posts
#551558
Screen Shot 2017-07-22 at 08.26.30.png

Hi

I would like to make a selected radio button in views filter another colour using CSS. At the moment I have this which works perfectly... but can't figure out how to specify a condition for 'selected', 'checked' or 'focus'...

label.radios-taxonomies-title { cursor:pointer; cursor:hand; text-transform:uppercase; }
label.radios-taxonomies-title:hover { color:#999; }

You can see by the image that I have a basic custom post type with a taxonomy. In the view of these posts I have a taxonomy filter displayed as radio buttons with ' AJAX results update when visitors change any filter values'. The user simply clicks one of the options to filter the results.

Here is the filter in views Filter Editor:

[wpml-string context="wpv-views"][/wpml-string] [wpv-control taxonomy="technique" url_param="wpv-technique" type="radios" default_label="All"]

Hoping someone can help me ????

#551574
ScreenShot.png

https://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label

The Radio has an HTML attribute "checked" and that is what you want to address.

Something like

input[type="radio"]:checked+label{ font-weight: bold; color:red;} 

You will need to use "raw" output in the Filter Editor Style Settings.
(see screenshot)

Remember that CSS and JS are required knowledge sets to use Toolset.

I highly encourage to keep this close for reference:
hidden link
hidden link

#551578

Ahhhh Thank you. That's the one.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.