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
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 7 years, 4 months ago.
Assisted by: Beda.
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 ????
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
