Turn off Chrome/Safari spell checking by HTML/css [duplicate]

Question

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?

Jackanapes

Exact duplicate of Disable spell-checking on HTML textfields, for ~5 years. Guess moderators were busy closing more legit questions. – Eliza

Answer 1

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.

Stereoscopic

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. :( – Japeth

Did not do it in chrome android 67 :/ – Synergistic

Answer 2

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.

Bellied

For iOS Safari, this is the way to go. – Borak

This is the only answer I've found that works in Chrome. – Higdon

Answer 3

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

<form spellcheck="false" .. />

Clinker

Answer 4

In React, you gotta use spellCheck instead.

<input spellCheck={false} type="text"/>

Ophelia

Answer 5

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

But if you must:

#your-input{outline:none;}

Keratose

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. #71574 may also be helpful in this case. – Graver

@Graver 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. – Keratose

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. – Words