How to remove iPhone/Safari input element rounding?

Turn off iPhone/Safari Input Element Rounding

Input elements, such as text fields, often have a rounded style when rendered on Safari for iOS devices. This may conflict with the desired aesthetics of a website. Fortunately, there are CSS solutions to remove this rounding.

iOS 5 and Later

On iOS 5 and later versions, the following CSS can be applied to eliminate input field rounding:

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

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

If platform-specific removal is necessary, the -webkit-border-radius property can be used instead:

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

Legacy Versions

For older versions of iOS, the -webkit-appearance: none property was used:

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

The above is the detailed content of How to remove iPhone/Safari input element rounding?. For more information, please follow other related articles on the PHP Chinese website!