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

Elimination of iPhone/Safari Input Element Rounding

Input fields typically exhibit a rounded appearance within the iPhone/Safari browser, conflicting with the desired rectangular design. This article delves into methods for modifying the input element style via CSS or metadata.

Solution for iOS 5 and Later:

To remove rounded corners on iOS 5 and later, implement the following CSS:

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

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

Alternative Method:

For iOS-specific removal of rounded corners, or in cases where cross-platform normalization is not feasible, consider the following CSS:

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

However, note that support for prefixed properties like this may be discontinued in the future.

Legacy Browser Solution:

For older iOS versions, it was necessary to use the -webkit-appearance property:

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

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