Styling spellcheck errors in Chrome with CSS or JavaScript

One issue I am facing is the need to change the language of a spelling error on a website without disabling it:

I have attempted various solutions, but none of the properties like ::spelling-error and :webkit-spell-check seem to be supported.

Is there a workaround for this situation?

::spelling-error {
  color: blue;
}
<p spellcheck="true" contenteditable>
  word that doesnt exist arberbicee
</p>

PS: Using JavaScript is also an option

Answer №1

As mentioned in the questions, the CSS pseudo elements ::spelling-error and ::grammar-error give you the ability to personalize the markers shown by the browser for spelling errors. This feature is currently available in Chrome and other chromium-based browsers, with plans for it to be implemented in other browsers in the near future.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Get a captcha using Selenium in Java

I am currently working on obtaining a CAPTCHA image. My previous question mentioned this in this post. I have managed to successfully fill out the necessary forms and download the CAPTCHA, however, it appears to be random each time. This is my current co ...

What is the best way to delete rows from a table that was created using a JQuery AJAX response?

I am currently working on a coding project where: The user is required to input a location, Clicks on a button to execute a GET call in order to fetch data based on the specified location, and A table is then filled with the retrieved data. My goal is t ...

The error message "Cannot access property 'findAll' of undefined in expressjs" is displayed

An issue has occurred with ExpressJS: TypeError - Cannot read property 'findAll' of undefined. It seems that all Sequelize functions are not working correctly. Numerous errors are popping up, such as "Cannot read property 'sequelize method& ...

Exploring the depths of HTML 5, harnessing the power of

As I embark on a new website project, I am excited to incorporate HTML5 for a fresh and dynamic look. To address potential compatibility issues with Internet Explorer, I have decided to utilize the resources provided by the HTML5 Boilerplate project. In m ...

Creating a Striking Multi-Layered CSS Header

Can someone help me figure out how to add horizontal lines behind the words in this header? Here is what I have so far: https://i.sstatic.net/dN7s4.jpg. However, I want to achieve something similar to this design: https://i.sstatic.net/FZoSF.jpg. You can v ...

How come the behavior of Array.prototype.push() results in creating an endlessly nested array when used on itself?

While testing out the following code: const animals = ['pigs', 'goats', 'sheep']; animals.push(animals) console.log(animals); An error occurred in my testing environment: Issue: Maximum call stack size exceeded. What is c ...

Incorporate additional information into the current data series within Lightning Chart

In my React JS application, I have successfully used a point series to create a chart displaying data. However, I am now looking to bind real-time data to the chart. For example, when the chart initially loads with 10 points, I want to continuously receiv ...

Placing an Image in the Right Corner Using jQuery Mobile

I am currently developing a mobile app and I need to align three images one below the other at the right corner next to some text. Any suggestions would be greatly appreciated. Thank you in advance. Below is my code snippet: <div> <ul data-r ...

Is it possible to use jQuery's .attr method to change the href attribute if a certain text is contained within a DIV

(Twitter) I'm struggling with how to incorporate the .attr method at the start of links/A/href when the selected element contains specific words: $(".tweet:contains('government','Anonymous')").each(function(){ $old_url = $(thi ...

Utilizing JQuery and AJAX to dynamically populate a select menu with XML data

I am facing an issue with populating a drop-down menu from an XML file using a specific script. Let me share the script I have been working with: $(document).ready(function(){ // loading jQuery 1.5 function loadfail(){ alert("Error: Failed to r ...

Separating the logic of identical schemas and implementing multi-tenancy in Node.js using Mongoose

In the system I am developing, there are two key requirements: Each client needs to be completely isolated from one another Clients can have multiple subsidiaries which they should be able to switch between without needing to re-authenticate, while ensuri ...

React Color Input: The input format should follow the pattern of "#rrggbb", with rr, gg, and bb being two-digit hexadecimal values

The code is functioning correctly and as expected. The background color of the squares changes when each input is modified, and the squares update once the button is pressed. During development, there was a moment when the warning mentioned appeared brief ...

Manipulate a table using Jquery's find() method to insert a cell populated with information from an array using before()

My current challenge involves inserting a column of cells with data from an array. Despite attempting to use a for loop, all the cells end up displaying the same data from the array. What I really want is for each new cell to show 'row_header1', ...

List layout enhancement provided by Bootstrap

I'm facing an issue with the layout of a feature list content box. While it looks good on desktop, there are problems in smaller versions like tablet and mobile devices. The four words with icons are breaking and I believe this might not be the best s ...

AngularJs: Extracting a string from compiled HTML or a variable

My goal is to retrieve a string from a template that I can later edit using Textangular or save in a database. This template comes from the server and is stored in the database. TemplateMailService.get($scope.type, function (data, status) { ...

Open the Bootstrap Modal for the chosen item in the table

I'm currently working on developing a basic buddy list feature for a web application. I am querying an SQL table to retrieve the list of buddies associated with the current user. Each row in the table includes a button that, when clicked, should displ ...

In the event that the $state cannot be located, redirect to a different URL using Ui

Our platform is a unique combination of WordPress backend and AngularJS frontend, utilizing ui.router with html5 mode turned on and a base href="/" due to the stack sites being in the root of the site. We are currently facing an issue: 1) Previously, whe ...

Retrieve data from the scss document

I'm trying to extract color values from an scss file where they are stored as variables like $base-colour:#fff444. My goal is to display these color values in a column of an HTML table. Does anyone have any suggestions on how to achieve this? ...

Gmail not displaying image - troubleshoot with Django Python-Postmark

Having trouble displaying static images in Gmail when using django python-postmark for mailing. Gmail is appending a url proxy to the src of the images, which causes them not to display properly. What might I be missing here? How can I solve this issue? Th ...

Having trouble with CORS in your Angular application?

I am attempting to retrieve data from a site with the URL: Using the $http service After extensive research, I have come up with this CoffeeScript code snippet: angular.module('blackmoonApp') .controller 'PricingCtrl', ($scope, $ht ...