Home > Article > Web Front-end > How Can I Disable Rounded Input Elements in iPhone/Safari?
Disabling Rounded Input Elements in iPhone/Safari
Safari on iOS devices tends to render text input fields with a rounded style, which may not always align with the intended design. To address this issue, here's how to instruct Safari not to round the input fields and render them rectangular:
For iOS 5 and Later:
1. CSS Style:
Use the CSS rule border-radius: 0; to remove the rounded corners on all input fields.
2. WebKit Appearance:
For the search input field specifically, set the -webkit-appearance property to none.
<code class="css">input { border-radius: 0; } input[type="search"] { -webkit-appearance: none; }</code>
For Legacy Safari Versions:
WebKit Appearance:
In older versions of Safari, use the -webkit-appearance: none property for all input fields to remove the rounded styling.
<code class="css">input { -webkit-appearance: none; }</code>
Note:
The above is the detailed content of How Can I Disable Rounded Input Elements in iPhone/Safari?. For more information, please follow other related articles on the PHP Chinese website!