How can I remove the active black border from my 'sort by' on my collection pages ?

[crepscity]

Hi there, just wondered if anyone could help me with this. The 'sort by' menu, on my products/collection pages, seems to have a thick border around the text when active (the border disappears when I click somewhere else). Is there any way to get rid of the border? I have tried many codes but to no avail. Can anyone please help?

[Made4uo-Ribe]

Hi @crepscity 

Would you mind to share your store URL? Thanks!

[crepscity]

Hi Made4uo, thank you for your quick response.

URL: crepscity.com

[Made4uo-Ribe]

Thanks for the info, check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.facet-filters__sort:focus-visible {
  outline: none;
  box-shadow: none;
}
.mobile-facets__sort .select__select:focus-visible {
  outline: none;
  box-shadow: none;
}
.mobile-facets__sort .select__select.focused,
.no-js .mobile-facets__sort .select__select:focus {
   outline: none;
  box-shadow: none;
}

.facet-filters__sort.focused,
.no-js .facet-filters__sort:focus {
  outline: none;
  box-shadow: none;
}

• And Sve. 
• Result:
• 

  I also remove the mobile.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[crepscity]

Ive tried the above code but it didnt work?

[Made4uo-Ribe · Accepted solution]

You can find the code on the component-facet.css on the asset folder. 

If in case you dont like to overide them. But to override them we can just add !important.

.facet-filters__sort:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.mobile-facets__sort .select__select:focus-visible {
   outline: none !important;
  box-shadow: none !important;
}
.mobile-facets__sort .select__select.focused,
.no-js .mobile-facets__sort .select__select:focus {
   outline: none !important;
  box-shadow: none !important;
}

.facet-filters__sort.focused,
.no-js .facet-filters__sort:focus {
  outline: none !important;
  box-shadow: none !important;
}

And save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[crepscity]

Thank you it worked 

[Romtron13]

Hi There,

Just purchased the impact theme, I can’t figure out how to remove these borders around variant picker, currency selector, main menu box, and sort box. 

any ideas how to remove these?