Change style of sorting menu

[HYPD]

Hi there,

How can I change the style of the sorting menu from the default look to the styled look (as shown in these two attachments)?

[Kyle – SUPPORT]

Hi

It’s not easy to style dropdowns, please seE: https://www.google.co.uk/search?q=styling+select+dropdown&oq=styling+select&aqs=chrome.2.69i57j0l5.5741j0j7&sourceid=chrome&es_sm=119&ie=UTF-8

– Kyle

[HYPD]

Hi Kyle,

The two screenshot of the styled one was taken directly from an older version of Neighborhood. I would think that this style is one that’s built in to the theme already? Correct me if I’m wrong.

[HYPD]

This reply has been marked as private.

[Kyle – SUPPORT]

Ok let me check with the developer why it was removed, there must be a reason

– Kyle

[HYPD]

Hey Kyle,

Any word?

[Kyle – SUPPORT]

Please try adding this to your custom css:

.woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select {
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
cursor: pointer;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding: 6px 40px 6px 14px;
height: 42px;
outline: 0;
background-image: url('images/[email protected]');
background-repeat: no-repeat;
background-position: 90% center;
background-size: 9px 6px;
}
select {
display: block;
vertical-align: top;
z-index: 2;
border: none;
outline: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
appearance: none;
cursor: pointer;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding: 8px 25px 8px 15px;
line-height: 110%;
margin: 0 0 5px;
background-image: url('images/[email protected]');
background-repeat: no-repeat;
background-position: 90% center;
background-position: calc(100% - 20px) center;
background-size: 9px 6px;
}

You may need to alter the image path for the arrow

– Kyle

[Holly & Trisha]

so how do you add the arrows?

[Kyle – SUPPORT]

Like I said, you may need to alter the image path for the arrows, they are in dante/images, you may need to put your full url plus the path to the images for it to work as our css is in a different location to the original css file

– Kyle