variant select dropdown style

Hey guys, 

I just connected my Printful account with Squarespace.
Everything looks fine but I don't like my variant select dropdown menu and I can't figure out how to change it.

It looks like this:

But I want it to look like this:

I hope you can help me.

Please post a URL to a page with the variant selections.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Sure. Here's the URL:
https://www.janz.design/shop/crusader-short-sleeve-unisex-t-shirt

PW: P04876W25

Thank you in advance.

Add the following CSS to Store Settings > Advanced > Page Header Code Injection for the Store page.

<style>

  .variant-option {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    }
    
  .variant-option .variant-option-title {
  
    -ms-flex-preferred-size: 4rem;
    flex-basis: 4rem;
    
    }
    
  </style>

Let us know how it goes.

7 minutes ago, creedon said:

Add the following CSS to Store Settings > Advanced > Page Header Code Injection for the Store page.

<style>

  .variant-option {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    }
    
  .variant-option .variant-option-title {
  
    -ms-flex-preferred-size: 4rem;
    flex-basis: 4rem;
    
    }
    
  </style>

Let us know how it goes.

Thank you.

This is how it looks now:

So we're on the right track.
Now I only need to customise the product variant selector. 

 

I want the selectors look more like the ADD TO CART button – but white with a dark stroke.
And I would like to have a single grey arrow instead of the blue square with two arrows.

1 hour ago, Tschodr said:

Now I only need to customise the product variant selector. 

That will be a bit more of a challenge I think. It would require some amount of manipulation of the structure of the selectors with Javascript and CSS.

Please see How TO - Custom Select Box for a general idea of what is involved.

Perhaps someone has already done something like this and can help you the rest of the way to achieve your effect.

45 minutes ago, creedon said:

That will be a bit more of a challenge I think. It would require a some amount of manipulation of the structure of the selectors with Javascript and CSS.

Please see How TO - Custom Select Box for a general idea of what is involved.

Perhaps someone has already done something like this and can help you the rest of the way to achieve your effect.

I'll follow the instruction.
Thank you so much!