Dropdown Text Size Changes but does not remain

[RDNaturals]

Hi, I have added the below code to the theme.liquid to increase the font size of variants in a dropdown menu on the product page.  When I go to view the changes the size of the dropdown changes perfectly, however, it only remains for a few seconds before it goes back to a small text.  To see an example, a link to the page is below. Can someone help?  

Here is the syntax I used:

{% if template contains 'product' %}

<style>

.product-form__input.product-form__input--dropdown select {
font-size: 20px;
}
</style>
{% endif %}

And the link to one of the products in my store

https://www.rdrewnaturals.com/collections/feminine-care/products/foam-wash

[BSSCommerce-TC · Accepted solution]

Hi @RDNaturals ,

 What's input select you want change text size

[Entesta · Accepted solution]

Hi @RDNaturals 

The class product-form__input--dropdown that you have added to the css does not exists on the product page. 
You can add the following css to increase the font size of your variant dropdowns in the product page.

<style>
.shopify-product-form .selector-wrapper .single-option-selector {
    font-size: 20px; /* adjust as per your needs */
}
</style>

Let me know if it works. Thanks.

[BSSCommerce-TC · Accepted solution]

Hi @RDNaturals ,

 What's input select you want change text size

[Entesta · Accepted solution]

Hi @RDNaturals 

The class product-form__input--dropdown that you have added to the css does not exists on the product page. 
You can add the following css to increase the font size of your variant dropdowns in the product page.

<style>
.shopify-product-form .selector-wrapper .single-option-selector {
    font-size: 20px; /* adjust as per your needs */
}
</style>

Let me know if it works. Thanks.

[Made4uo-Ribe · Accepted solution]

Hi @RDNaturals 

Do you mean this one?

if it is check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

 .selector-wrapper select {
     font-size: 20px !important;
}

• And Save. If you like to adjust also the option. 

 .selector-wrapper option {
     font-size: 20px !important;
}

• if both of theme. 

.selector-wrapper option, .selector-wrapper select {
     font-size: 20px !important;
}

• And Save. 
• result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[RDNaturals]

This worked, thank you very much