is there a way to change the color of the text depending on the background color of another element in CSS?

  angular, css, html, javascript, sass

In my project, span elements are used to show error messages or control labels. The text color of the messages is red and I need to set the color of the text depending on the background color of the element(f.e. f1 element) which stays behind the span element in UI since I use the error messages on different input elements with different background colors. Is there any way to solve this problem? Thanks in advance.

theme.scss file

.has-error .help-block, .has-error .control-label {
  color: red;
}

login.component.html file

<form #form="ngForm" (ngSubmit)="onSubmit(form, $event)">
  <div upeFormGroup hasFeedback [hasError]="un.invalid">
    <div class="input-group">
      <input type="text"
             [(ngModel)]="user.username"
             upeFormControl
             name="username"
             #un="ngModel"
             placeholder="User"
             required>
    </div>
    <span [upeHelpBlock]="un.invalid">Please fill the name input</span>
  </div>
</form>

auth.component.html file

<div fxFlex="grow">
   <div class="form-box">
     <router-outlet></router-outlet>
   </div>
</div>

auth.component.scss file

.form-box {
   background-color: gray;
}

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.