132

Is there a way for a web developer to turn off Chrome/Safari/WebKit's spellchecking on particular input or textarea elements? I mean either by special tag attribute or a proprietary CSS instruction.

There is a CSS instruction for turning off outlining of inputs so I thought that might also exist. I know how a user can do it.

Or, as a user, can I disable it for some particular domain?

tillda
  • 18,150
  • 16
  • 51
  • 70
  • 5
    Exact duplicate of [Disable spell-checking on HTML textfields](http://stackoverflow.com/questions/254712/disable-spell-checking-on-html-textfields), for ~5 years. Guess moderators were busy closing more legit questions. – Dan Dascalescu Jul 07 '15 at 10:59

5 Answers5

224

Yes, there is the HTML5 spellcheck attribute.

<textarea spellcheck="false"> or <input type="text" spellcheck="false">

http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#spelling-and-grammar-checking

Update: This is now supported in the latest versions of all browsers.

Gaurav
  • 12,662
  • 2
  • 36
  • 34
  • 1
    It doesn't seem to work on Safari Mobile. I have a input that I want to disable spell check and the iPad keeps on bringing spelling suggestions even though the attribute spellcheck is set to FALSE. :( – ThiagoPXP Dec 06 '13 at 05:51
  • Did not do it in chrome android 67 :/ – Ray Foss Jul 25 '18 at 00:54
41

This works in Safari 7.1 and should work also in others:

<input autocomplete="off" autocorrect="off" autocapitalize="off" 
spellcheck="false"/>

Only spellcheck="false" didn't work.

Timo Kähkönen
  • 11,962
  • 9
  • 71
  • 112
7

for all elements of a form it is possible and so:

<form spellcheck="false" .. />
MTM
  • 71
  • 2
  • 4
5

In React, you gotta use spellCheck instead.

<input spellCheck={false} type="text"/>
Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114
3

Regarding outlining of input tags: don't do it, it's a visual cue for users.

But if you must:

#your-input{outline:none;}
Camilo Martin
  • 37,236
  • 20
  • 111
  • 154
  • 3
    If you are getting rid of the outline it's usually because you already have other visual cues in place for `:focus` and the outline is interfering with them; leaving the `:focus` as default causes discontinuity between different browsers. http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links/ may also be helpful in this case. – Hawken Oct 27 '12 at 19:10
  • 2
    @Hawken I've seen several sites remove visual cues and not provide any replacement. I'm ok with custom cues, but there has to be some. – Camilo Martin Dec 20 '12 at 12:16
  • 1
    The question is about the squiggly line inside the textbox when spell check deems the input misspelled, not the outlining, if I'm not mistaken. That said, your answer is good-to-know info. – MrBoJangles Feb 11 '15 at 17:48