如何仅以斜角

Question

我正在使用angular的引导程序库进行表单开发。

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

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

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

我正在努力做到这一点。

我还附上了示例屏幕截图，以供参考。

我们如何实现这一目标？

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