Form input box does show differently on iPhone and iPad than on browser

[simonf]

Hello,

I have just created my first page on web flow and I have the problem, that the email input form on the iPhone and iPad shows differently than in the browser on my mac.

On the iPhone / iPad the box has rounded corners and a little shadow, but I want the design to be super simple with just a 1px boarder like on the normal website.

The website is: www.wonce.co and the form is directly visible when opening the page.

Any ideas how I can change this / what I can do?

When I check the CSS in Firefox in the mobile mode it shows right, but on iPhone and iPad - not.

Your help is much appreciated.

Thanks,
Simon

[cyberdave (Dave S.)]

HI @simonf ! Thanks for the info, I am sorry to hear about the issue.

Could you also give a link to the design, in order to see how it is made in Webflow? Also a screenshot of the form in the designer would help

Share a read-only link | Webflow University

[simonf]

Hi Dave,

Thanks for your quick reply.

here you go: https://preview.webflow.com/preview/wonce?preview=4c23b6865cd41eb5f0c98780c3bafdb1

here the “mistake” of the form with rounded boarder:

Thanks,
Simon

[cyberdave (Dave S.)]

Hi @simonf, sorry for the late reply. This may be caused by iOS auto formatting the input fields.

You can try to stop this from happening on iOS, by using a little custom css in the head of your site in custom code.

Copy below and paste into your header and republish the site. See if the styling is still affected on iOS.

<style>
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
} 
</style>

I hope this helps ! Let me know how it goes ! Cheers, Dave

[simonf]

Hi Dave,

I just found the time to try this out - but it does not work…

Could you please check if I added the code correctly: www.wonce.co

Thanks,
Simon

[cyberdave (Dave S.)]

Hi @simonf, I am sorry for the late reply. I took a look at the site, but I do not see any of those custom css I gave you earlier.

Make sure to paste that to the Header of your site on the Custom Code tab of your site settings.

Let me know if you have any questions

[dapitts08 (davida)]

hi @simonf i am having the same problem and tried posting your code into the head tag with no luck. the corners for my input is still round. it only happens on safari…it is styled correctly for mobile chrome. any thoughts?

live: http://selfpubweekly.webflow.io/
share: https://preview.webflow.com/preview/selfpubweekly?preview=9dcb2af0b10aef1b7f91e08b7049010a

[Waldo (Waldo Broodrÿk)]

Hey @simonf & @dapitts08 I found that if you go in and set the border radius of the input field to 0px on the tablet & mobile break point, it fixes this issue (you may have to arrow up to 1px and then back to 0px for the style to highlight as a new style for that breakpoint, it will go from a gold-yellow color in the style panel, to a blue to represent that it’s no longer a inherited cascading style).
Looks like the style isn’t cascading down from desktop to mobile @cyberdave & @brryant

Let me know if you have any questions please.

Thanks,

Waldo

[dapitts08 (davida)]

that worked. thanks!

[simonf]

Sorry Dave, I put the code into a different site, where I had the same problem, but there it didn´t work.

Anyway - the solution from Waldo ( below ) seems to be perfect and works just fine.

So thanks for your help - the issue is solved ; )

( Although you might want to look into this again, since it should not be normal, that there are styles added, when the mobile view is activated, that you didn´t set )

Best,
Simon

[simonf]

Fantastic - Thank you so much, what a simple but great work around ; )