My website renders well on the iPhone/Safari browser, with one exception: My text input fields have a weird rounded style which doesn't look good at all with the rest of my website.
Is there a way to instruct Safari (via CSS or metadata) not to round the input fields and render them rectangular as intended?
On iOS 5 and later:
input {
border-radius: 0;
}
input[type="search"] {
-webkit-appearance: none;
}
If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use input { -webkit-border-radius: 0; } property instead, which is still supported. Of course do note that Apple can choose to drop support for the prefixed property at any time, but considering their other platform-specific CSS features chances are they'll keep it around.
On legacy versions you had to set -webkit-appearance: none instead:
input {
-webkit-appearance: none;
}