Stop Phones Zooming Into Form Fields
Sets form fields to at least 16px text so iPhones stop zooming in when a field is tapped, and makes inputs full width on small screens.
Opens WPIDE on
Code
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
font-size: max(16px, 1em);
}
@media (max-width: 600px) {
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
form select,
form textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
}Notes
Applies to all forms on the front of the site; the full-width rule only kicks in below 600px.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.