Change field outline colour on product pages

Hi @tuanphan

Currently on my product pages the fields have a black outline and on click a thick white outline, I have tried to amend both of these things on site style but couldn't find a way to do it. Are you able to help? I have attached screenshots.

1 - Make outline white

2 - Remove thick outline on click

For both desktop and mobile.

Thank you!

Hi,

What is site url? Can you share link to product in screenshot?

link to website/product page - https://www.matildamaeboutique.co.uk/shopourcollection/p/white-tutu-romper

Thank you!

You can use this code to Website > Website Tools > Custom CSS

.product-details .variant-option select {
    border: none !important;
    outline-color: transparent !important;
}

@tuanphan I tried to above code but it made the field border transparent and not white and still showed the white thicker border when clicking.

So you want

• Border to white (not transparent)
• remove white line around the white border when clicking

?

@tuanphan yes please!

Use this CSS code to change to white border

.product-details .variant-option select {
    border-color: white !important;
}

Use this code to remove white border on click

.product-details .variant-option select {
    border-color: white !important;
    outline-color: transparent !important;
}

amazing thank you!!