Как установить цвет фона для текста входного текстового компонента только в угловых

Question

Я использую библиотеки начальной загрузки на угловом языке для разработки форм.

У меня есть компонент ввода только для чтения, называемый «Статус» в форме.Значения для этого поля могут быть Open, In Progress, Closed.

Чтобы обеспечить визуальный индикатор, я ищу стиль текстового значения поля Status с соответствующим цветом фона.

В настоящее время, когда яустановите цвет для поля ввода текста, все поле ввода текста будет отмечено выбранным цветом фона.Однако я хочу, чтобы цвет фона применялся только к тексту.

Я изо всех сил пытаюсь это сделать.

Я также приложил пример снимка экрана для справки.

Как этого добиться?

Answer 1

1.Без элемента ввода

в html

Status: <span class="badge" [ngClass]="{'open': status =='open'}">{{Status}}</span>

в CSS

.badge {
    padding: 4px;
    margin-left: 10px;
    border-radius: 4px;
    background: blue;
    color:white;
}

.badge.open {
    background: green;
}

2.С элементом ввода

в html

Status <input class="badge" [ngClass]="{'open': status =='open'}" [size]="status.length" [(ngModel)]="status">

в CSS

input.badge {
    border: 0;
    background: blue;
    color: white;
    padding: 4px;
    margin: 0;
    display: inline-block;

}

input.badge:active, input.badge:focus {
    background: blue;
    outline: 0;
}

input.open {
    background: green;
}