Removing Black border from drop down menu when selected

Store Design

Topic summary

A user encountered an issue where selecting a dropdown menu on their product page caused an unwanted black border to appear.

Another participant provided a straightforward CSS solution:

  • Duplicate the theme as a backup
  • Add the following code to the end of the base.css file:
.select__select:focus {
  box-shadow: none;
}

The original poster confirmed the solution worked successfully.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

When I Select the drop down menu on the site it makes the border black, how do i make it so the Drop down menu Border doesn’t change whether its selected or not?

Site: https://benwilson.co/products/pillar-pendant

pass:egunte

Thanks!

ww.JPG
ww.JPG843×736 41.7 KB

benwilson_0-1683663506715.png
benwilson_0-1683663506715.png845×714 114 KB

2

Unfortunately, you need to modify it via code, but it’s an easy one.

  1. Duplicate your theme first to have a backup in case something goes wrong
  2. Add the following code at the end of the file base.css
.select__select:focus {
    box-shadow: none;
}
2 Likes
3

Thank you so much worked great!

1 Like