Turn off Chrome/Safari spell checking by HTML/css

HtmlCssGoogle ChromeSpell Checking

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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.

Solution 3 - Html

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

<form spellcheck="false" .. />

Solution 4 - Html

In React, you gotta use spellCheck instead.

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

Solution 5 - Html

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

But if you must:

#your-input{outline:none;}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiontilldaView Question on Stackoverflow
Solution 1 - HtmlGauravView Answer on Stackoverflow
Solution 2 - HtmlTimo KähkönenView Answer on Stackoverflow
Solution 3 - HtmlMTMView Answer on Stackoverflow
Solution 4 - HtmlPaul Razvan BergView Answer on Stackoverflow
Solution 5 - HtmlCamilo MartinView Answer on Stackoverflow