Angular Material: Highlight Words in a Textbox

Question

How do I Highlight Only the Text in Angular Material textbox, and Not the whole inner box? I only want to highlight up from 's' to the end of 'i' in (Sushi), not the whole box.

We will apply this to a read only textbox . Also, reading Javascript manipulations are not ideal with Angular, so looking for appropriate way.

https://material.angular.io/components/input/overview

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

what did you mean to highlight only one character in every input? — Mohammad, Dec 13 '19 at 00:54
Can't do that within an input box... give this is a good workaround: https://stackoverflow.com/a/43296121/8757883 — Akber Iqbal, Dec 13 '19 at 01:04

Jojofoulk · Accepted Answer · 2019-12-16T00:15:28.203

A quick solution is to highlight the text in the CSS for a certain class. This class can then be assigned for your readonly inputs. This solution isn't perfect but it might fit your needs

This SO post shows how to highlight only the text of an input, I suggest you read it to also see the limitations of this solution.

CSS:

.yourInputElement::first-line{
  background-color: gold; 
}

Here's a simple example showing how it would work.

Hope that solves your issue :)

Angular Material: Highlight Words in a Textbox

1 Answers1

Linked