input[type=checkbox]:checked + label { some css style;}
However, this requires <input> and <label> being 'sibling' elements, one following the next, on the same level, not containing one another(<div><input><label></div>) :
If I set "display:block" I can see the checkbox with checkmark.
This is custom CSS and unfortunately, custom programming work is out of the scope of our support policy. If you need custom programming for your site, Please feel free to contact our certified partners.
=> https://toolset.com/consultant/
However - I would like to suggest you few jquery plugins using which you can style your checkboxes and may help you.
=> hidden link
=> hidden link
=> hidden link
Hello Minesh, Thank you for the response.
The "display: none;" or "hidden" rule is what is recommended by most posts that deal with checkbox styling. Disabling that rule just brings back the default box, which isn't styled at all, bringing me back to the beginning: checkboxes not styled.
The same approach (hiding the original checkboxes) was used here: https://toolset.com/forums/topic/style-checkboxes/ and here: https://toolset.com/forums/topic/style-checkboxes/ and here: hidden link.
I just want to know how I can target the checkboxes generated by the Toolset code, which puts the <input> inside the <label> tag, as described in my original inquiry.
Hi Minesh,
Thanks for the links. Unfortunately, I already went through all of these. The methods shown won't work, because of the original issue, where the Views-generated code puts <input> INSIDE the <label> tags.
For example, your links show this html structure:
Again, I'm circling back to the original issue, with regards to the HTML structure from the parametric search inside of Views. All examples I saw on how to style checkboxes show this format: INPUT precedes LABEL, and is not inside of it.
<input type="checkbox">
<label>Some Label</label>
This is not the same as the Toolset-generated HTML (Views > Parametric search) I see, which is:
<label><input type="checkbox">Some Label</label>
Therefore, having one inside the other makes this code not applicable:
input[type='checkbox']:checked + label {
/* some css here */
}
The CSS selector "+" in "firstElement + secondElement" targets "secondElement" when it appears immediately next to the "firstElement", and not when one is inside of the other.
This is why I added the question here, because the standard ways do not apply in this case. Basically, I was hoping to see if there is a way to either target this structure with CSS, or to modify the code in Views to match something easier to target.