Default Radio Filter, without css
Filter Tags (radio)
// HTML STRUCTURE OF JETSMARTFILTER RADIO LIST
Filter Tags (radio)
Customize the filter
- Add dropdown-filter customscroll classes to the Radio filter widget
- Add the following css to the page or site
- 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
Filter Tags (radio)