Taste Theme - Add Border To Dropdown Boxes

Store Design
1

Hello,

I am trying to add a border for the variant box on product pages on my store, I am using the Taste theme and my store URL is styl-case.myshopify.com.

I have already removed all borders on my site using this code:

:root, .color-background-1 {
    --color-foreground: none !important;
}

And I have made an exception for a border on the title page with this code:

div#ImageWithText--template--16228551524606__16582879129a2953e5 {
    border: 2px solid black !important;
}

Which looks like this, notice how there are no borders on the multicolumn images, which is what I wanted.

2022_07_22_0mp_Kleki.png
2022_07_22_0mp_Kleki.png627Ă—768 42.8 KB

But now I am trying to add a border for the variant drop-down box on all product pages, here is an example url: (https://stylcase.com/products/custom-laptop-sleeve) and this is what it looks like at the moment

2022_07_22_0mp_Kleki (1).png
2022_07_22_0mp_Kleki (1).png631Ă—731 19.9 KB

I have tried adding this code to my theme to add a border to the “12 inch” box, but it did not work.

div#Option-template--16228551491838__main-0 {
    border: 2px solid black !important;
}

Thank you for reading, any help is appreciated.

1 Like
2

Hi @styl ,

I am not sure if I understand. If you want the outcome below, then try this code instead.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
.product-form__input.product-form__input--dropdown .select {
    border: 2px solid black;
}

Outcome:

made4Uo_0-1658537405954.png
made4Uo_0-1658537405954.png1048Ă—318 19.8 KB

1 Like
3

That’s exactly what I wanted, thank you for the quick response it works perfectly.

1 Like