Skip Navigation

[Resolved] CSS styling of checkboxes in Views parametric search

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

Our next available supporter will start replying to tickets in about 0.10 hours from now. Thank you for your understanding.

Tagged: 

This topic contains 5 replies, has 2 voices.

Last updated by Minesh 5 years, 10 months ago.

Assigned support staff: Minesh.

Author
Posts
#429788

I am trying to: style input checkboxes, which were created by Views. I can style the checkbox, but i can't seem to target the :checked pseudo-class. The checkmark doesn't appear. Some forums and various posts (ex. https://toolset.com/forums/topic/style-checkboxes/ and https://toolset.com/forums/topic/how-to-add-css-to-a-checkbox-or-other-types-field/ and hidden link) show how to style checkboxes with this type of CSS:

  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>) :

  <li>
    <input type="checkbox">
    <label>Some label</label>
  </li>

However, Views creates <input> checkbox inside of <label> tag:

  <li>
    <label>
      <input type="checkbox">
      Some label
    </label>
  </li>

How can i properly target the :checked checkbox? The original link above (

I visited this URL: hidden link

I expected to see: checkbox styling as written in css.

Instead, I got: Styled checkbox, but cannot see ":checked" CSS (ie. checkmark).

Below is the code. Any input is appreciated. I think others will find it useful:
PAGE SOURCE:

<div class="restaurant-search-checkboxes">
  <ul class="categorychecklist form-no-clear">
    <label class="selectit">
      <input value="bodden-town" class="js-wpv-filter-trigger" name="wpv-location[]" id="in-location-161" checked="checked" type="checkbox"> 
      Bodden Town</label>
    </ul>
  </div>

CSS:

.restaurant-search-checkboxes input[type='checkbox'] {
  display: none;
}
.restaurant-search-checkboxes label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  font-size: 10px !important;
  line-height: 16px;
  font-weight: normal;
  text-transform: uppercase;
  padding-left: 18px;
}
.restaurant-search-checkboxes label:before {
  left: 0;
  top: 2px;
  position: absolute;
  content: "";
  background-color: #eee;
  border: 1px solid #384852;
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}
/* below is the rule I need help with  */
.restaurant-search-checkboxes input[type='checkbox']:checked + label {
  content: '\2713'; 
  font-size: 16px;
  border: 1px solid #ea7500;
  color: #ea7500;
  text-align: center;
  line-height: 16px; 
  vertical-align: middle;
}
#430090

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

I see the issue. you make checkbox invisible using the CSS code:

.restaurant-search-checkboxes input[type="checkbox"] {
    display: none;
}

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

#430353

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.

#430607

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

You should use CSS sprite image for checkboxes. I suggest you should follow the example given in the following link:
=> hidden link
=> hidden link

If you need further help with your custom CSS code. Please feel free to contact our certified partners.
=> https://toolset.com/consultant/

#430820
Views-generatedHTML-Checkbox.png

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:

 
<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>

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.

#431104

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

What if you try to target the checked checkbox input as:

.restaurant-search-checkboxes  label input[type='checkbox']:checked  {
  /* some css here */
}

Does this help?