Drop down variant border disappeared - how to get back?

[PMPrinted]

My seem to be having a problem when selecting the drop down variant selector over the pills option on the dawn theme. The border has disappeared for the variant option but instead covers all the product information.

Not aware I have down anything to create this issue and have been through all the options on the editor to no avail. so assuming I will need to make a change to the code but no clue what and where. Anyone advise

[topnewyork]

Hello, @PMPrinted
Please share “Store URL”
Thanks!

[codingHelp1]

In edit code search for file base.css and add this code in bottom of file

input {
 border: 1px solid #ddd;
}

[PMPrinted]

its www.pmprinted.co.uk.

thanks

[topnewyork]

Hello, @PMPrinted

1. Go to Online Store
2. Edit Code
3. Find theme.css/base.css file
4. Add the following code in the bottom

.select {
    border: 2px solid black !important;
}

Thanks!

[websensepro]

Hi @PMPrinted , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[websensepro]

Hi @PMPrinted

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product-form__input.product-form__input--dropdown .select__select {
    border: 1px solid black !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[abhicadisoft]

.product-form__input .select {
max-width: 100%;
border: 1px solid black;

}

[PMPrinted]

This didn’t work. Below is how I would like the design to look, but seemingly any product with vairiantions ends up with the box around the product infor and no box around the variant picker.

[topnewyork]

@PMPrinted Sorry for this, I updated the code, again you can apply that code
Thanks

[PMPrinted]

Still not working, I am getting the following message when i save the code. But it then goes on to save?

• CssSyntaxError: Unclosed block (3682:3)
• Start line:3682, column:3

This is the code from 3681 owards;

}
100% { transform: translateX(100%) scaleX(0);

.select {
border: 2px solid black !important;
}

[topnewyork]

@PMPrinted try this one

.product-form__input .select {
    max-width: 100%;
    border: 2px solid black !important;
    height: auto;
    width: 100%;
    padding: 0;
}

[ZestardTech]

Hello @PMPrinted ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

.product-form__input .select {
    border: 1px solid var(--input-border-color)!important;
    width: calc(var(--input-width)* 1%) !important;
    max-width: calc(var(--input-max-width)* 1px) !important;
    padding-right: 1px;
}

Let me know if you need further assistance!