How to Disable Input Element Rounding in Safari?

Disable Input Element Rounding in Safari

When developing websites for the iPhone and Safari browser, you may encounter an issue where text input fields exhibit a distractingly rounded appearance that conflicts with the website's overall design.

To rectify this issue and render the input fields as the intended rectangular shape, instruct Safari using the following CSS code:

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

For input fields designated for search purposes, utilize the following additional CSS:

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

If isolating the rounding removal to iOS devices is necessary, employ the -webkit-border-radius: 0; property. However, be aware that Apple may cease supporting prefixed properties in the future.

For older versions of iOS, use -webkit-appearance: none; instead:

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

The above is the detailed content of How to Disable Input Element Rounding in Safari?. For more information, please follow other related articles on the PHP Chinese website!