Weird elements on Safari – iOS

Hello @nubrinnah,
thanks for choosing Bento!
This is how Safari browsers automatically render button elements ?? in order to make it go away, you can try using this trick, inserting the snippet into the “Additional CSS” tab of the “Appearance – Customize” admin section.

Hi there, thank you for provided solution. I have used following code

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

It looks like it is working so far. If I understand the code correctly, it changes appearance for Safari and Mozilla for all elements and for whole website?

Yes, precisely ?? we will also consider adding this to the next version update of Bento itself.

Great. The last thing that bothers me is that in mobile Chrome, those buttons have sharp edges but on mobile Safari I see the edges rounded. Can this be fixed as well, so the design is fluent across every possible platform?

You can add the -webkit-border-radius declaration as detailed here – this will remove the rounded edges from Firefox. Thanks for raising these issues, I do agree the theme should have minimum deviations across browsers – we’ve added the above declarations to the backlog for the next version of Bento.

Lovely. Worked great, thanks a lot ?? Really awesome support! Thumbs up.