HTML・CSS Writing 2022

Resolved the default design of text fields and buttons being applied on iphone / safari

To solve the problem that the default design of text fields and buttons is applied in iphone / safari, specify "-webkit-appearance: none;".

It will be easy to set all the elements with "*".

* {{
  -webkit-appearance: none;
}

Please note that if you specify this, the checkboxes and radio buttons will disappear. The above settings are useful when you want to make everything your original design, including checkboxes and radio buttons.

Not specified

Does iphone / safari have a faint shadow when you look closely? This is the default design of iphone / safari.

<div>
  <input type = "text" style = "border: 1px solid green;">
</div>

With designation

<div>
  <input type = "text" style = "-webkit-appearance: none; border: 1px solid green;">
</div>