This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Reply To: Radio Button Checked State Styling

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Radio Button Checked State Styling Reply To: Radio Button Checked State Styling

#33499
Ernest MarcinkoErnest Marcinko
Keymaster

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
}