How to Remove Rounded Corners from Text Input Fields on iPhone/Safari?

Disable Input Element Rounding on iPhone/Safari

Certain websites may encounter an issue where text input fields appear with unwanted rounded corners on iPhone/Safari browsers. This can conflict with the intended design of the website.

CSS Solution

To remove the rounded corners specifically on Safari, without affecting other browsers, modify the input element's style using CSS:

<code class="css">input {
  -webkit-border-radius: 0;
}</code>

Additional CSS for Search Inputs

For search input fields, an additional property is required:

<code class="css">input[type="search"] {
  -webkit-appearance: none;
}</code>

Legacy iOS Versions

For legacy iOS versions (prior to iOS 5), use the following CSS property instead:

<code class="css">input {
    -webkit-appearance: none;
}</code>

Note: For compatibility across different browsers and platforms, consider normalizing rounded corners using the border-radius property, as Apple may deprecate support for the prefixed -webkit-border-radius property in the future.

The above is the detailed content of How to Remove Rounded Corners from Text Input Fields on iPhone/Safari?. For more information, please follow other related articles on the PHP Chinese website!