How to set background color for input text component's text only in angular

Question

I am using bootstrap libraries in angular for form development.

I have a readonly input text component called 'Status' in the form. The values for this field can be Open, In Progress, Closed.

To provide a visual indicator, I am looking to style the Status field's text value with appropriate background color.

Currently when I set the color to the input text field, the entire input text field is marked in the background color selected. However, I want the background color to only apply to the text.

I am struggling to get this done.

I have also attached a sample screenshot for reference.

How can we achieve this?

Answer 1

1. Without Input element

In html

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

In CSS

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

.badge.open {
    background: green;
}

2. With Input element

In html

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

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