Transparency on IOS

HTML & CSS
1

Hello,
I am not sure if anyone can assist me. I am trying to put a currency converter into my Shopify store. When viewing my webpage on my computer(windows) the currency convertor is clear however on my phone it is quite ugly with a silver filling and white borders and text. Is anyone please able to advise of the code that I could use to make it look transparent with white writing on both my mobile application and computer. See image and coding below for reference.

image

header.liquid code:

{% form 'currency' %} {{ form | currency_selector }} {% endform %}

custom.js code:
$(‘.shopify-currency-form select’).on(‘change’, function() {
$(this)
.parents(‘form’)
.submit();
});

theme.scss.liquid code: NOTE THIS IS WHERE I THINK THE CODE NEEDS TO BE (IT IS A MESS AS I HAVE BEEN TESTING LOTS OF THINGS)
.shopify-currency-form select
{-webkit-appearance: menulist; color:white; background:0; padding:0; border:0; margin:0; width:65px; background-color:rgba(0, 0, 0, 0)}

2

This is the image of what it looks like on my computer (THE IDEAL VERSION):
image

3

Hi,

I think the only way you can style in Safari or ios is to remove the select appearance altogether with -webkit-appearance:none and then add your own caret rather than the native os version.

Here’s a demo of mine that is about 5 years old but still seems to work well.

There’s also a good article here but they don’t seem to have as consistent results as my old version.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.