css - 如何仅以 Angular 设置输入文本组件文本的背景颜色

Question

我正在使用 Angular 中的 Bootstrap 库进行表单开发。

我在表单中有一个名为“状态”的只读输入文本组件。此字段的值可以是打开、进行中、已关闭。

为了提供视觉指示器，我希望使用适当的背景颜色设置状态字段文本值的样式。

目前，当我为输入文本字段设置颜色时，整个输入文本字段都标记为所选背景色。但是，我希望背景颜色仅适用于文本。

我正在努力完成这件事。

我还附上了示例屏幕截图以供引用。

我们怎样才能做到这一点？

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;
}