Change shape and color of pultiple drop downs

Store Design
1

Hey everyone.

I have designed our website and it’s pretty decent. I would like to change the ugly shape of our drop downs to a rounded, pill sort of shape and have a colored bullet at the right side of every scent of out soap. Like this: https://ca.drsquatch.com/collections/deodorant and when you click “choose scents” on the 6pack selection, you’ll see what I mean.

Anyone know how to do that??

Thanks!

Product Page

2

Hi @gentlemoose ,

Could you try adding this to the bottom of your assets > base.css file

.product-form select{
padding: 20px;
border-radius:25px;
}

Let me know if this is what you were meaning, thanks!

3

Nope, didn’t work. Maybe I don’t understand where to put it? Right before {% endif %} at the very bottom of all of the forms ???

4

Hey @gentlemoose , it needs to go into your main css file. You will need to paste the above CSS into your base.css file. You can find this by going to your theme, clicking on the 3 dots, clicking edit code, going to the assets folder and clicking on base.css and going all the way to the bottom and pasting the above css into the file. Let me know if you need any additional help!

5

Hi @gentlemoose ,

I visited your website as well as the sample website. Since you use the select default tag, editing the style of the options is not possible (They are OS dependent and are not part of the HTML/browser.)
You can read more here: https://web.archive.org/web/20170528070441/http://msdn.microsoft.com/en-us/library/ms535877(v=vs.85).aspx
With the current select section, you can delete the down arrow and restyle the border like this

view (45).png
view (45).png1289×751 107 KB

By finding the base.css file in the theme’s source code, then add the following code:

select {
    padding: 10px;
    border-radius: 4px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

If you want to have the same interface as the sample website, I recommend that you customize the select section instead of using the default select tag.

Hope it helps @gentlemoose !

6

Okay, the other person above had code that worked and so did yours. They were just slightly different in size. I adjusted the sizes a little and it looks great. Only thing is that it only changed the shape. I changed the font to Quattrocento Sans but I still need the font larger and maybe bolder as well as a large bullet at the end of each scent in a different colour behind the text. Id also like to make the background of each drop down black. Any idea??

Thanks!!

7

Okay… that worked!

I adjusted the sizes a little and it looks great. Only thing is that it only changed the shape. I changed the font to Quattrocento Sans but I still need the font larger and maybe bolder as well as a large bullet at the end of each scent in a different colour behind the text. Id also like to make the background of each drop down black. Any ideas??

Thanks!!

Thanks!!