> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/disable-auto-zoom-in-input-text-tag-safari-on-iphone-ok-1.md).

# Disable Auto Zoom in Input “Text” tag - Safari on iPhone (ok)

https\://stackoverflow\.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone

518

The browser will zoom if the font-size is less than `16px` and the default font-size for form elements is `11px` (at least in Chrome and Safari).

Additionally, the `select` element needs to 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 necessary to use all the above, you can just style the elements you need, eg: just `text`, `number`, and `textarea`:

```
input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}
```

Alternate solution to have the input elements inherit from a parent style:

```
body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}
```

[share](https://stackoverflow.com/a/6394497)  [improve this answer](https://stackoverflow.com/posts/6394497/edit)  follow [edited Jan 23 '18 at 12:29](https://stackoverflow.com/posts/6394497/revisions)[![](https://i.stack.imgur.com/x9N3C.jpg?s=32\&g=1)](https://stackoverflow.com/users/479156/ivar)[Ivar](https://stackoverflow.com/users/479156/ivar)4,2891111 gold badges4242 silver badges4848 bronze badgesanswered Jun 18 '11 at 7:17[![](https://www.gravatar.com/avatar/39f11287703b85c3691909e2bd96a4bd?s=32\&d=identicon\&r=PG)](https://stackoverflow.com/users/804303/srikanth)[srikanth](https://stackoverflow.com/users/804303/srikanth)5,31711 gold badge1111 silver badges44 bronze badges

* 82Just to get everything covered: `select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { font-size: 16px; }` – [Nic Barbier](https://stackoverflow.com/users/1872267/nic-barbier) [Jul 5 '13 at 15:10](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment25424617_6394497) 
* 8\@Nic You need to use `select:focus`. Was having the same issue too. – [DGibbs](https://stackoverflow.com/users/1895201/dgibbs) [Jun 9 '14 at 14:25](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment37215851_6394497)
* 163I don't understand, how is this a fix? What if I want a smaller/larger font size? – [bryan](https://stackoverflow.com/users/2761425/bryan) [Aug 3 '15 at 23:46](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment51524449_6394497)
* 50proper way is to change meta tag to: \<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> – [Milos Matic](https://stackoverflow.com/users/425070/milos-matic) [Dec 4 '15 at 9:57](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment55923195_6394497)&#x20;
* 41\@MilosMatic In most cases probably not a good solution, as it completely prevents the user from scaling the page. Potentially even more annoying for your visitors. – [BadHorsie](https://stackoverflow.com/users/851885/badhorsie) [Jul 8 '16 at 14:32](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment63957872_6394497)&#x20;

[show **18** more comments](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#)458

You can prevent Safari from automatically zooming in on text fields during user input **without** disabling the user’s ability to pinch zoom. Just add `maximum-scale=1` but leave out the user-scale attribute suggested in other answers.

It is a worthwhile option if you have a form in a layer that “floats” around if zoomed, which can cause important UI elements to move off screen.

`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">`[share](https://stackoverflow.com/a/46254706)  [improve this answer](https://stackoverflow.com/posts/46254706/edit)  follow [edited Sep 28 '18 at 13:15](https://stackoverflow.com/posts/46254706/revisions)answered Sep 16 '17 at 13:59[![](https://i.stack.imgur.com/X4XtY.jpg?s=32\&g=1)](https://stackoverflow.com/users/1291000/daxmacrog)[daxmacrog](https://stackoverflow.com/users/1291000/daxmacrog)4,85911 gold badge1111 silver badges1616 bronze badges

* 88This is the 2018+ solution. Upvote this like your life depends on it. – [Henrik Petterson](https://stackoverflow.com/users/1185126/henrik-petterson) [Feb 2 '18 at 12:35](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment84162002_46254706)
* 28This will break android devices zooming ability – [fen1ksss](https://stackoverflow.com/users/1018686/fen1ksss) [Aug 14 '18 at 14:52](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment90641872_46254706)
* 4\@daxmacrog, you are right, but the OP did not mention whether he wants to break androids by allowing needed behaviour. This is where personally I took incorrect option. Of course, it's better to specify. – [fen1ksss](https://stackoverflow.com/users/1018686/fen1ksss) [Aug 15 '18 at 11:27](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment90667727_46254706)
* 18\@HenrikPetterson This does more than just disabling the auto-zoom as specified by OP, it also disables pinch zoom. So I don't think it's the 2018+ solution. – [André Werlang](https://stackoverflow.com/users/592792/andr%c3%a9-werlang) [Sep 17 '18 at 23:05](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment91698231_46254706)
* 4\@AndréWerlang That is not accurate. As stated clearly in the answer, this solution does not disable pinch zoom in Safari (or Firefox), which is what the OP asked about. But as pointed out in previous comments, it does disable user zoom on Android devices and in Chrome on iOS. – [daxmacrog](https://stackoverflow.com/users/1291000/daxmacrog) [Sep 18 '18 at 0:07](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment91698953_46254706)

[show **10** more comments](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone#)231

```
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}
```

### New: IOS will still zoom, unless you use 16px on the input without the focus.

```
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}
```

I added a background since IOS adds no background on the select.