Home  >  Article  >  Web Front-end  >  How to Remove Rounded Corners from Input Fields in iPhone/Safari?

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

Barbara Streisand
Barbara StreisandOriginal
2024-10-30 21:54:02912browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn