Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Radio Button Checked State Styling › Reply To: Radio Button Checked State Styling
Hi Viktor,
Unfortuantely this is not possible only via custom CSS styling, as CSS does not allow parent node selection based on child node values, you will need custom JS for it.
Luckily this is not too complicated, so I madde a quick custom code for you to handle that. Try adding this code to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.
add_action('wp_footer', 'wp_footer_add_js_button_class');
function wp_footer_add_js_button_class() {
?>
<script>
(function(){
document.querySelectorAll('.asp_sb_2_1 .asp_label').forEach(function(label){
label.addEventListener('click', function(event) {
event.preventDefault();
document.querySelectorAll('.asp_sb_2_1 .asp_label').forEach(function(element){
element.classList.remove('asp_label_selected');
});
this.classList.add('asp_label_selected');
});
})
}())
</script>
<?php
}
This will add the “asp_label_selected” class to the labels. You can use that to make any custom CSS to style the selected button:
.asp_label_selected {
// your style here
}