[Resolved] Search Bar has border-radius on actual mobile device, but not in Responsive view

[bjbowen]

Actual iPhone X shows a rounded border-radius on for the search bar. Chrome, Safari, Firefox.

Desktop browsers in responsive design mode don’t show the round border-radius. Chrome, Safari, Firefox.

This is the CSS:

input[type=”email”], input[type=”number”], input[type=”password”], input[type=”search”], input[type=”tel”], input[type=”text”], input[type=”url”], select, textarea {
-webkit-appearance: none;
border-radius: 0!important;
background-color: #fff;
}

I found an old, old support topic and that’s why I put ” -webkit-appearance: none;” in the css. But, I didn’t have any luck using that.

Any ideas?

[Ying]

Hi there,

This is what I see on my iPhone, the search field doesn’t have a border radius:
https://www.screencast.com/t/FSf2DUg5LxT

Let me know if I miss anything.

[bjbowen]

I meant to come back and tell you all that it eventually cleared itself. I had cleared the cache, browsing history, all the things and it kept showing the same thing… Eventually, it actually showed correctly. So, thank you for checking on this!

[Ying]

No problem 🙂

[Author]

Posts