facetwp fselect css

djrmom

{{gist file=”facet.css” lang=”css”}}
/** you may need to use !important to force css styles
** width: 300px !important;
** or see https://www.w3schools.com/css/css_specificity.asp for adding css specificity to your css
** rules
**/

/** change width of fselect **/
.facetwp-type-fselect .fs-wrap,
.facetwp-type-fselect .fs-dropdown {
width: 300px;
}

/** target a specific fselect by facet name, change “categories” to name of your facet **/
.facetwp-facet-categories.facetwp-type-fselect .fs-wrap,
.facetwp-facet-categories.facetwp-type-fselect .fs-dropdown {
width: 300px;
}

/** increase fselect height **/
.facetwp-type-fselect .fs-dropdown .fs-options {
max-height: 300px;
}

/** style box for fselect **/
.facetwp-type-fselect .fs-label-wrap {
border: none;
}

/** move dropdown arrow **/
.facetwp-type-fselect .fs-arrow {
right: 100px;
}

/** position arrow for dropdown relative to label instead of far right of container **/
.facetwp-type-fselect .fs-arrow {
display: inline-block;
position: relative;
top: -10px;
right: auto; /** use a value such as right: 10px; to move closer to label **/
left: auto;
bottom: auto;
}
.facetwp-type-fselect .fs-label-wrap .fs-label {
display: inline-block;
}
{{/gist}}