CSS ::spelling-error

The ::spelling-error CSS pseudo-element is used to style text that has been identified as containing a spelling error. This is particularly helpful for providing immediate visual feedback to the user about potential typos or misspellings in the text input. The styles applied to this pseudo-element can enhance the user experience by drawing attention to these errors.

How to Use ::spelling-error

To effectively use the ::spelling-error pseudo-element, you need to ensure that the spellcheck attribute is enabled on your input or textarea elements. Below is an example demonstrating its implementation.

<fieldset class="example">
  <legend>Result:</legend>
  <p>This is an input with a misspelled word: <span class="misspelled">recieve</span>.</p>
  <input type="text" spellcheck="true" value="recieve" />
</fieldset>

Styling ::spelling-error

You can customize the appearance of spelling errors using CSS. Here’s an example of how to style the ::spelling-error pseudo-element.

<style>
    .misspelled {
        text-decoration: underline;
        color: red;
    }
</style>

<fieldset class="example">
  <legend>Result:</legend>
  <p class="misspelled">This is a misspelled word: <span class="misspelled">recieve</span>.</p>
</fieldset>

Example with User Input

Below is an example where users can enter text, and if there are any spelling errors, they will be highlighted accordingly.

<input type="text" spellcheck="true" class="input-error" placeholder="Type here..." />

<fieldset class="example">
  <legend>Result:</legend>
  <input type="text" spellcheck="true" class="input-error" placeholder="Type here..." />
</fieldset>

Conclusion

The ::spelling-error pseudo-element is a powerful tool for enhancing user input forms, providing real-time feedback on spelling issues. By properly enabling spellcheck and styling these errors, you can greatly improve user experience.