class is not shown in elements inspector in chrome

Question

as shown in the image and in the circled parts, i created a class called clsTest . in this class i would like to change the position and some propertities of the circled element in red as shown in the image. the circled elements in red are composed of input field and icon of the calendar. when i activate the elements inspector in chrome, the class clsTest is never present or listed among other classes. in other words,as shown in the image, the class .clr-control-container is shown but the class clsTest is not!!

please let me know how to correctly assign a class and be able to modify its attributes to change the position and properties of the circled element in red.

html :

<clr-date-container class="clsDateContainer">
            <label id="idDateOfSprayLabel">
                <p>Date:</p>
            </label>
            <input id="idDateOfSprayValue" class="clsTest clr-control-container" clrDate type="date" placeholder="Specify date of spray" [(ngModel)]="iDatePasser.dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)" name="dateOfSpray"
                value="2021-07-21" min="2021-01-01" max="2090-12-31" />
        </clr-date-container>

css :

.clsTest{
bottom: 10;
right: 0px;
left: 430px;
top: 174px;
width: auto;

}

image :

Answer 1

I assume the default Angular style encapsulation is causing this behavior here.

Try adding the pseudo class :host to your css like this:

:host .clsTest{
  bottom: 10;
  right: 0px;
  left: 430px;
  top: 174px;
  width: auto;
}

The :host tells Angular to apply the styles directly on DOM elements (not based on components/templates). Optionally, you could also add ::ng-deep to apply styles to all children of the selected element as well (where the CSS selector matches as well).

Answer 2

The input has the class at the moment

To see the class of the input element just click on it(in the Element section of chrome developer tools), I specify it on the image.

Keep in mind the sequence of the classes you give to an element is important the second class will overwrite the first one.