Turn off Chrome/Safari spell checking by HTML/CSS

Battle plan to disable spellcheck

Here's your cheat code to disable spell check for each HTML form:

1. For single warriors (<input> or <textarea>), use spellcheck="false" as your shield.
2. Whole army of elements getting hammered by spell check? Use spellcheck="false" on <form>:

<form spellcheck="false">
  <!-- Preparing for a spell-free battle -->
</form>


3. CSS, unfortunately, forgot to spell "anti-spellcheck". It can't turn off spell checking.
4. In React land, remember to camel-case. It's spellCheck={false}:

<input type="text" spellCheck={false} /> <!-- Reacting to no spell check -->


5. autocomplete="off" and autocorrect="off": The twin brothers who can help tame your wild inputs.
6. Just like checking exam papers, always cross-verify in all browsers.

User-friendly notes

Before you cannonball into the code:

• Consider the users: Some users love those red squiggly lines. Enable or disable wisely.
• Autocomplete and Autocorrect: Don't confuse these friends of spellcheck with the latter.
• Overriding user settings: Battle of the attributes? User settings might win.

Visualization

Embedded visualization into real HTML/CSS-picture:

<input type="text" spellcheck="false" /> <!-- Red pen ran out of ink!-->


Consider your keyboard (⌨️) on diet, without the extra seasoning of spell check (🖊️🚫):

Before: ⌨️ + 🖊️🔴 = Stressful typing party!
After:  ⌨️ + 🖊️🚫 = Clean typing spree, no red alarms.

CSS also waves its magic wand, cleaning the slate:

input {
  /* What corrections? */
  -webkit-user-modify: read-write-plaintext-only;
}


Unboxing the spellcheck

Peek into the spellcheck attribute:

• HTML5 Spec: WHATWG's Holy Grail guiding browser behavior including spell checking.
• Spellcheck Attribute: Introduced in HTML5 and does just what it says.
• Browsers: Check spellcheck's passport for its browser compatibility.

Traps and pitfalls

While we sail the sea, beware of these common icebergs:

• Don't use carelessly: Wrongly disabling spell checking could turn your user experience sour.
• Can't override user settings: User settings may out-power your spellcheck.
• User Agent Stylesheets: Not all browser styles bow to your whims. Be careful with your content-editable elements.

The 'spell' in spellcheck

Here's your telescope into the universe of spellcheck:

• Performance: Disabling spell check could potentially make your browser breathe easier.
• User Efficiency: No more red distractions, users can focus better on their tasks.