[Resolved] Styling radio as text filters

[Author]

Posts

[steveN-4]

Tell us what you are trying to do? Style radio buttons as text links at the top of a view

Is there any documentation that you are following? not specific

I have used CSS in the view to target the radio buttons and have got them horizontal and radio dots removed as well as styled. I also have hover styling sorted but I cannot target the checked radio button succesfully. CSS is :-

.form-group .radio {
display: inline-block;
padding-right: 5px;
}

.radio input[type="radio"]{
opacity: 0;
position: fixed;
width: 0;
}
.radio label {
display: inline-block;
background-color: #eee;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.radio label + input[type="radio"]:checked {
background-color: rgba(59, 169, 54, 0.5);
}
.radio label:hover {
background-color: rgba(59, 169, 54, 0.7);
}

Am I missing something?

[Christian Cox]

I also have hover styling sorted but I cannot target the checked radio button succesfully.
It might be helpful if I can see this rendered on the front-end of your site to inspect the styles applied to each element in the browser. Sometimes styles from other theme or plugin stylesheets can override these styles because of specificity or other circumstances. Can you provide a URL where I can see these inputs? Do I need a login?

[steveN-4]

Hi Cristian,
I have no idea what happened with my earlier reply. At first I thought it not there at all and then it looked to be public so the user pass is changed to the new detail above.

hidden link is the page

Regards

Steve

[steveN-4]

Hi Christian,
Could you remove the info from the above post #2060425 please?

Thanks

Steve

[Christian Cox]

Sorry for the delay, I was working through my queue and did not get to see your note until just now. I'm not sure what happened but I have marked that reply as private and the information should no longer be visible to the public. I am still investigating the issue and will give you an update shortly, just wanted to let you know about the privacy issue ASAP.

[Christian Cox]

Sorry for the confusion, but I'm not able to log in with the credentials in reply #2060425 now. I have activated private reply fields so you can share new login credentials securely. Look for those fields below the main reply text editor area in the forum.

[Christian Cox]

I also have hover styling sorted but I cannot target the checked radio button succesfully. CSS is :-

.radio label + input[type="radio"]:checked {
background-color: rgba(59, 169, 54, 0.5);
}

Are you trying to target the checked radio input element, or the label element that contains the checked radio button? The CSS code above uses an adjacent sibling combinator: "+"
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

That selector targets the element after the "+" symbol - in your case, the checked radio input element. But there are two problems in this approach:
1. If you inspect the markup generated for the filter, the radio input field is not a sibling of the label element - it is a descendant. See the screenshot here.
2. Even if the selector was accurately targeting the radio input field, applying a background color to the input itself will not result in any visible change. It seems that what you want to accomplish is to change the background color of the wrapping label element when the input is checked, am I correct?

If so, then another problem is there is no CSS selector that allows you to target a parent element of a checked input child as far as I know. Also it is not simple to modify the HTML markup produced by a custom search filter block, so you cannot simply move the input markup to be a sibling of the label by adjusting some HTML or changing the block somehow.

The only simple way I know how to adjust this markup is to activate Toolset's Bootstrap 4 setting. You can find that setting in Toolset > Settings > General tab. If you choose one of the following options, the filter markup will change to reflect Bootstrap 4 style forms and the radio input will become a sibling of its corresponding label:
- The theme or another plugin is already loading Bootstrap 4
- Toolset should load Bootstrap 4

Short of a custom JavaScript solution, I think this is the most practical workaround for the problem you're struggling with. Let me know if you have a question about the BS 4 settings or if I've misunderstood what you want to accomplish.

[steveN-4]

Hi Christian,
enabling that puts everything back to being radio buttons again so obviously completely different CSS is required so I will dig into that and have another go.
Don't want to get into using java unless absolutely neccesary so I will do battle again tomorrow 🙂
Thanks