[Resolved] Styling radio button

[Author]

Posts

[marF]

Hi, I'm trying to style a radio button. Everything works fine except when the button is selected (checked). This is the page: hidden link

A few months ago I did the same with another project (hidden link) and then it worked fine and now I see that the html structure is different in the two projects.

In this project, input is inside label:

<span class="wpv-custom-search-filter__input"><div class="radio">
<label for="categoria-de-projectes-" class="">
<input id="categoria-de-projectes-" class="js-wpv-filter-trigger" name="wpv-categoria-de-projectes" type="radio" value="0" checked="checked">
Tots
</label>
</div><div class="radio"><label for="categoria-de-projectes-cartells"><input type="radio" id="categoria-de-projectes-cartells" class="js-wpv-filter-trigger" name="wpv-categoria-de-projectes" value="cartells">Cartells</label></div><div class="radio"><label for="categoria-de-projectes-merchandising"><input type="radio" id="categoria-de-projectes-merchandising" class="js-wpv-filter-trigger" name="wpv-categoria-de-projectes" value="merchandising">Merchandising</label></div></span>

In hidden link project page, input isn't inside label:

<span class="wpv-custom-search-filter__input"><div class="form-check">
<input id="categoria-de-sector-" class="form-check-input js-wpv-filter-trigger" name="wpv-categoria-de-sector" type="radio" value="0" checked="checked">
<label for="categoria-de-sector-" class="form-check-label ">
All
</label>
</div><div class="form-check"><input type="radio" id="categoria-de-sector-agroalimentario" class="js-wpv-filter-trigger form-check-input" name="wpv-categoria-de-sector" value="agroalimentario"><label for="categoria-de-sector-agroalimentario" class="form-check-label">Agroalimentario</label></div><div class="form-check"><input type="radio" id="categoria-de-sector-energias-verdes" class="js-wpv-filter-trigger form-check-input" name="wpv-categoria-de-sector" value="energias-verdes"><label for="categoria-de-sector-energias-verdes" class="form-check-label">Energías verdes</label></div><div class="form-check"><input type="radio" id="categoria-de-sector-salud-biotech" class="js-wpv-filter-trigger form-check-input" name="wpv-categoria-de-sector" value="salud-biotech"><label for="categoria-de-sector-salud-biotech" class="form-check-label">Salud / Biotech</label></div></span>

My css code is:

.wpv-custom-search-filter__input input[type="radio"] {
appearance: none;
opacity: 0.01;
z-index: 100;

}

.wpv-custom-search-filter__input label {
padding: 2px 10px;
border: 1px solid #67BE96;
border-radius: 5px;
cursor: pointer;
z-index: 90;
float: left;
margin-right: 15px;
background-color: #67BE96;
color: #fff;
}

.wpv-custom-search-filter__input label:hover {
background-color: #DC4415;
border: 1px solid #DC4415;

}

input[type="radio"]:checked + label{
background-color: #DC4415 !important;
border: 1px solid #DC4415 !important;
}

But in this project "input[type="radio"]:checked + label" doesn't works and I don't understand. How should I do it? Thanks!

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - with time there are updates and there could possibly updates that may correct the HTML structure or there could be possibility that you may need to update the code but we never know this without checking first.

What if you try to create same block structure as per your new site and try to create a test page on your old site and see if you see it working with both old and new site.

If that is not the case, do you see any structure difference with old and new site how the radio buttons are added?

If no, can you please send me link where I can see the radio button is working as expected and also share the link of your old site where its not working as expected. Maybe few screenshot will helpful to understand where exactly you are having issue with.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I'm not sure how site is build where the radio button checked CSS code working.

However, here is the fix and to fix it I've added the following custom JS code to your view block's custom JS section:

jQuery( document ).on( 'js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated ready', function( event, data ) {
  jQuery('.radio > label > input[type="radio"][checked="checked"]').parent().addClass('active');
});

I've added the following custom CSS code to your view block's custom CSS section:

.radio label.active {
background-color: #DC4415 !important;
border: 1px solid #DC4415 !important;
}

More info:
- https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-view
- https://toolset.com/course-lesson/adding-custom-javascript-to-views-templates-and-archives/#steps-for-adding-javascript-to-a-view

Can you please confirm it works as expected.

[marF]

It works! Thank you Minesh!