如何仅以角度为输入文本组件的文本设置背景颜色

Question

我正在使用角度的bootstrap库进行表单开发。

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

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

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

我正在努力完成这项工作。

我还附上了一个示例截图供参考。

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

Answer 1

1. Without Input element

在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. With Input element

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