I came across two interesting pseudo-element selectors: ::spelling-error and ::grammar-error. Both select exactly what they say, a spelling or grammar error that has been flagged by the browser. They also have pretty good browser support working virtually everywhere except in Firefox.
Like ::selection (and a Monopoly game a Zombie partially masticated) the exact properties you can use are limited. You basically get color, background-color, text-decoration, and text-shadow. Here’s what we’ll be using:
::spelling-error {
color: pink;
background-color: red;
}
::grammar-error {
color: lightblue;
background-color: blue;
}Code language: CSS (css)But there’s one other important detail. The browser has to mark them as errors, and, like a good friend, it won’t just throw you under the bus when you copy your boss on that poorly-worded, 3am email. The content must be in an editable area like an input, a textarea, or an element with the contenteditable attribute set to true. That said, in order to see the highlighting, click into the editable area (outlined in red below) and then out of it to initiate the browsers spelling and error checking.
And for anyone looking at this in Firefox or whose browser’s spelling and error checking won’t initiate, here’s what it should look like:
