If the font-size is less than 16px and the default font-size for form elements is 11px (at least in Chrome and Safari) then the browser will zoom.
In addition to that, the select element must have the focus pseudo-class attached.
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
font-size: 16px;
}
It's not mandatory to use the above code, you can just style the elements you need, eg: just text, number, and textarea like this:
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
Another solution is that you can have the input elements inherit from a parent style this way:
body {
font-size: 16px;
}
input[type="text"] {
font-size: inherit;
}
Back