Change the drop down variant picker selection (hover and selected) color.

[adisicoffeeindi]

Link to the product to which I want to make the change-

https://adisicoffee.com/products/thogarihunkal_estate-honey-sun-dried

I want to change the the drop down active option background color to #ededed & add some gap between two options.

Regards.

[PageFly-Amelia]

Hi there,

This is Amelia from PageFly - Landing Page Builder App
Thank you for reaching out! You can use the following custom JavaScript code to change the style of the selected option in the dropdown variant.
Steps to follow:
1: Access your theme folder: Open the theme.liquid file.
2: Add the script tag: Insert the following script tag within the file:

<script>
// Add the code here
</script>

3: Paste the code: Place this code inside the script tag to change the style of the selected option:

<script>
const selectElement = document.getElementById("Option-template--23225008455997__main-1");
selectElement.addEventListener("change", function() {
const selectedOption = selectElement.options[selectElement.selectedIndex];
selectedOption.style.color = "#ededed"; 
});
</script>

I hope that my solution works for you.

Best regards,

Amelia | PageFly

[adisicoffeeindi]

Thanks for replying, But the solution didn't work. I have mentioned below, where I placed the the code. Did I place it correctly?

 <title>
      {{ page_title }}
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
    </title>

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}




     <script>
const selectElement = document.getElementById("Option-template--23225008455997__main-1");
selectElement.addEventListener("change", function() {
const selectedOption = selectElement.options[selectElement.selectedIndex];
selectedOption.style.color = "#ededed"; 
});
</script>



     
    <script src="{{ 'global.js' | asset_url }}" defer="defer"></script>  

     {% include 'meteor-menu', load: 'head' %}
  {{ content_for_header }}

    {%- liquid
      assign body_font_bold = settings.type_body_font | font_modify: 'weight', '500'
      assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
      assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
    %}

 Regards.

[PageFly-Amelia]

Hi there,

It seems you're using the default HTML <select> tag, which doesn't fully support custom CSS styling.
To achieve a customized dropdown, you'll need to create a custom dropdown using HTML, and then you can apply your custom CSS to it.
You can try to search "custom dropdown" and they will give you some examples

I hope this helps you achieve the look you're going for!

Best regards,
Amelia | PageFly