角材料：在文本框中突出显示单词

Question

如何仅突出显示“角材料”文本框中的文本，而不突出整个内部框？我只想在（Sushi）中突出显示从“ s”到“ i”的末尾，而不是整个方框。

我们将其应用于只读文本框。另外，使用Angular读取Javascript操作也不理想，因此请寻找适当的方法。

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>

Answer 1

一种快速的解决方案是在CSS中突出显示某个类的文本。然后可以为您的只读输入分配此类。该解决方案并不完美，但可能符合您的需求

此SO post显示如何仅突出显示input的文本，建议您阅读它，以了解此解决方案的局限性。

CSS：

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

这里是simple example，显示其工作方式。

希望能解决您的问题：）