Does Angular add any css class/directive for disabled controls in Reactive forms?

Question

I am disabling some controls in the reactive form dynamically based on certain conditions. I also want to provide specific styling to those disabled controls. Does Angular add any css class or any directive to the disabled controls? I didn't find any. How do I change the styles of the disabled controls?

Answer 1

You can target disabled element using :disabled CSS pseudo-class

component.html

<input type="text" class="name" [formControl]="control">

component.css

.name:disabled {
  background-color: dimgrey;
  color: linen;
  opacity: 1;
}

Example