如何仅在 angular 中为输入文本组件的文本设置背景色

Question

我正在使用 angular 中的 bootstrap 库进行表单开发。

我在表单中有一个名为 '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;
}