FacetWP and Sort/Select styling

Hello,

The main issue is the <style> tag on the page has a syntax error — the opening tag is missing its closing >:

<style
.facet-sort {
    border: 1px solid #143677!important;
    padding: 8px!important;
    border-radius: 12px!important!important;
}
</style>

Because the tag is malformed, the browser never parses the rules inside it. There’s also a double !important!important on the border-radius line, which is invalid.

Beyond that, native <select> elements won’t honor border-radius in most browsers without resetting their appearance first. Try targeting the actual FacetWP sort select like this:

.facetwp-facet-sort_by .facetwp-sort-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #143677;
    border-radius: 12px;
    padding: 10px 36px 10px 14px;
    margin-left: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23143677' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

The margin-left gives you the gap before the dropdown, and appearance: none is what unlocks the border-radius.

Hi there,

This is how the Sort By select currently looks on my end:

I’m not sure if that already matches what you’re aiming for, but if not, what other changes are you trying to make?

Ah okay. Unfortunately, this isn’t something that can be achieved with CSS alone which is why it is not working.

The Sort By and Filter By dropdowns are implemented differently. The Filter By control uses a custom dropdown component, which gives full control over how and where the options panel is rendered.

The Sort By control, on the other hand, uses the browser’s native <select> element. When that is opened, the browser (or operating system UI layer) determines how and where the option list is displayed. That behavior is outside of the page’s styling layer and can’t be reliably changed with CSS.

No problem!