Title

CSS JetSmartFilters: Checkboxes and Radio hover dropdown

description

Create a select-like behavior from a radio or checkboxes list by making the list appear only on hover, like a sub-menu.

Published 2022-05-13

Modified 2022-08-19

content

Default Radio Filter, without css

Filter Tags (radio)
				
					// HTML STRUCTURE OF JETSMARTFILTER RADIO LIST
<div class="jet-smart-filters-radio jet-filter " data-indexer-rule="show" data-show-counter="" data-change-counter="always">
	<div class="jet-filter-label">Filter Tags (radio)</div>
	<div class="jet-radio-list" >
		<form class="jet-radio-list-wrapper">
			// Item 1 'All'
			<div class="jet-radio-list__row jet-filter-row">
				<label class="jet-radio-list__item">
					<input type="radio" class="jet-radio-list__input" name="post_tag" value="" data-label="All tags">
						<div class="jet-radio-list__button">
							<span class="jet-radio-list__decorator"><i class="jet-radio-list__checked-icon fa fa-check"></i></span>
							<span class="jet-radio-list__label">All tags</span>
						</div>
				</label>
			</div>
			// Item 2
			<div class="jet-radio-list__row jet-filter-row">
				<label class="jet-radio-list__item">
					<input type="radio" class="jet-radio-list__input" name="post_tag" value="89" data-label="accordion">
						<div class="jet-radio-list__button">
							<span class="jet-radio-list__decorator"><i class="jet-radio-list__checked-icon fa fa-check"></i></span>
							<span class="jet-radio-list__label">accordion</span>
						</div>
				</label>
			</div>
			// Item 3
			<div class="jet-radio-list__row jet-filter-row">
				<label class="jet-radio-list__item">
					<input type="radio" class="jet-radio-list__input" name="post_tag" value="86" data-label="backend">
						<div class="jet-radio-list__button">
							<span class="jet-radio-list__decorator"><i class="jet-radio-list__checked-icon fa fa-check"></i></span>
							<span class="jet-radio-list__label">backend</span>
						</div>
				</label>
			</div>
			// Etc...
		</form>
	</div>
</div>
				
			

Customize the filter

  1. Add dropdown-filter customscroll classes to the Radio filter widget
  2. Add the following css to the page or site
  3. When styling the Checkboxes filter widget, replace all instances of ‘radio‘ with ‘checkboxes‘ in the css
				
					/* RADIO FILTERS */
.dropdown-filter .jet-smart-filters-radio {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Make the hidden dropdown list, add styling as needed */
.dropdown-filter .jet-radio-list {
    position: absolute;
    margin-right:3px;
    z-index: 5;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    transition:all 200ms;
}

/* Show on hover, set height as needed */
.dropdown-filter .jet-smart-filters-radio:hover .jet-radio-list {
    height:200px;
    opacity: 1;
}

/* Style list wrapper as needed, equal height as above */
.dropdown-filter .jet-radio-list-wrapper {
    overflow: auto;
    max-height: 200px;
    background-color:white;
    padding-top:4px;
    width:253px;
}

/* Remove padding/margin (top) from each row */
.jet-radio-list__row {
    padding-top: 0px!important;
    margin:0px!important;
}

/* Border under each item */
.dropdown-filter .jet-radio-list__row.jet-filter-row:not(:last-child) {
    border-bottom:2px solid #000;
    margin:0px!important;
}

/* Hover and active filter label styling */
.dropdown-filter .jet-radio-list__row.jet-filter-row:hover .jet-radio-list__label,
.dropdown-filter .jet-radio-list__row.jet-filter-row:hover .jet-radio-list__button,
.dropdown-filter .jet-radio-list__input:checked ~ .jet-radio-list__button {
    color:white;
    text-decoration:underline;
    text-underline-offset:1px;
    background-color: green;
    width:100%;
}

/* Make list item width equal to list width */
.dropdown-filter .jet-radio-list__item {
    width: 100%;
}

/* If click to remove filter is active, add a cross behind the active filter in the list */
.dropdown-filter .jet-radio-list__input:checked ~ .jet-radio-list__button .jet-radio-list__label:after {
    content:"\00D7";
    display: block;
    position: absolute;
    font-size:32px;
    right:16px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Add dropdown icon to list */
.dropdown-filter .jet-filter-label:after {
    background-image: url(/wp-content/uploads/Filter-Dropdown.svg);
    position: absolute;
    height: 20px;
    content: "";
    width: 15px;
    background-repeat: no-repeat;
    right: 20px;
    transition:all 400ms;
}

/* Animate the icon on hover */
.dropdown-filter .jet-smart-filters-radio:hover .jet-filter-label:after {
    transform: rotate(90deg);
}

/* SCROLLBAR */
/* width */
.customscroll ::-webkit-scrollbar {
    width: 10px;
}
/* Track */
.customscroll ::-webkit-scrollbar-track {
  background: red; 
}
/* Handle */
.customscroll ::-webkit-scrollbar-thumb {
  background: yellow; 
}
/* Handle on hover */
.customscroll ::-webkit-scrollbar-thumb:hover {
  background: green; 
}

/* If styling multiple widgets, add extra class to differentiate styling */
.dropdown-filter.green .jet-radio-list-wrapper {
    background-color:green;
}
.dropdown-filter.green .jet-radio-list__row.jet-filter-row:not(:last-child) {
    border-bottom:2px solid green;
}
.customscroll.green ::-webkit-scrollbar-thumb {
  background: green; 
}
				
			

Radio filter with css added:

Styling for widget width, label, fonts etc. in widget settings itself

Sources & References