How to add background color to text inside textbox?

I do not know how to ask this question correctly and I do not know how to find solutions in google because it leads me to how to add entire background color to a textbox which I am not looking for. I am trying to achieve such results like image below:

I want to add background to each text(of course characters) inside a input tag except spaces. User will start typing stuff inside input tag and will apply background color but spaced text won’t color.

I do not have any code because I do not know how to do it using css or JS if neccesary. I just have a

<input type="text">

I think it might use only JS but I do not know how to(of course I know JS). How do I achieve that?

>Solution :

You can use div with contentEditable and use little js to append text as span

<div contentEditable></div>

CSS

span {
  background-color: red;
  margin-right: 2px;
}
div {
  border: 1px solid black;
}

var el = document.querySelector("div");

el.addEventListener("blur", () => {
  var content = el.textContent;
  var contents = content.split(" ");
  el.innerHTML = "";

  contents.forEach((item) => {
    el.innerHTML += `<span>${item}</span>`;
  });
});

Something like this