diff --git a/projects/common/directives/input-background-color.directive.ts b/projects/common/directives/input-background-color.directive.ts
index 7bf48d945313945fac076a51b2f176517b990664..a13ae77a485bb2b4bfda495e3e861f0b9e9b0d96 100644
--- a/projects/common/directives/input-background-color.directive.ts
+++ b/projects/common/directives/input-background-color.directive.ts
@@ -1,32 +1,43 @@
 import {
-  AfterViewInit,
-  Directive, ElementRef, Input, OnChanges
+  Directive, ElementRef, Input, OnChanges, SimpleChanges
 } from '@angular/core';
 
 @Directive({
   selector: '[appInputBackgroundColor]'
 })
-export class InputBackgroundColorDirective implements AfterViewInit, OnChanges {
+export class InputBackgroundColorDirective implements OnChanges {
   @Input() backgroundColor!: string;
-  private targetElements!: HTMLElement[];
+  @Input() appearance!: string;
 
   constructor(private elementRef: ElementRef) { }
 
-  ngAfterViewInit(): void {
-    this.targetElements = this.elementRef.nativeElement.querySelector('div.mat-form-field-outline')?.children;
-    this.setBackgroundColor();
-  }
-
-  ngOnChanges(): void {
-    this.setBackgroundColor();
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.appearance && !changes.appearance.firstChange) {
+      this.clearFilledBackgroundColor();
+    }
+    setTimeout(() => { // wait for Angular to set up the component before manipulating it
+      this.setBackgroundColor();
+    });
   }
 
   private setBackgroundColor(): void {
+    let targetElements: HTMLElement[] = [];
+    if (this.appearance === 'outline') {
+      targetElements = this.elementRef.nativeElement.querySelector('div.mat-form-field-outline')?.children;
+    } else {
+      targetElements = [this.elementRef.nativeElement.querySelector('div.mat-form-field-flex')];
+    }
     // This fails, when component is not set up yet, therefore the extra check
-    if (this.targetElements) {
-      for (const element of this.targetElements) {
+    if (targetElements) {
+      Array.from(targetElements).forEach((element: HTMLElement) => {
         element.style.setProperty('background-color', this.backgroundColor);
-      }
+      });
     }
   }
+
+  /* Clear styling of old appearance before switching */
+  private clearFilledBackgroundColor(): void {
+    const targetElement: HTMLElement = this.elementRef.nativeElement.querySelector('div.mat-form-field-flex');
+    targetElement?.style.removeProperty('background-color');
+  }
 }
diff --git a/projects/common/ui-elements/text-area/text-area-element.ts b/projects/common/ui-elements/text-area/text-area-element.ts
index f08c649d2d16e749d3d9b9cb378a5d94b6327b8a..58aecc2ce243b268d915dd33df9389e697dd4e9e 100644
--- a/projects/common/ui-elements/text-area/text-area-element.ts
+++ b/projects/common/ui-elements/text-area/text-area-element.ts
@@ -10,7 +10,7 @@ import {
 import { initFontElement, initPositionedElement, initSurfaceElement } from '../../util/unit-interface-initializer';
 
 export class TextAreaElement extends InputElement implements PositionedElement, FontElement, SurfaceElement {
-  appearance: 'standard' | 'legacy' | 'fill' | 'outline' = 'outline';
+  appearance: 'fill' | 'outline' = 'outline';
   resizeEnabled: boolean = false;
   rowCount: number = 3;
   inputAssistancePreset: 'none' | 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' = 'none';
diff --git a/projects/common/ui-elements/text-field/text-field-element.ts b/projects/common/ui-elements/text-field/text-field-element.ts
index 890a5537979e4451788f7e0afd133099ac02f13e..0220165089c5015eaaa830c0e8ea2b736fa88277 100644
--- a/projects/common/ui-elements/text-field/text-field-element.ts
+++ b/projects/common/ui-elements/text-field/text-field-element.ts
@@ -10,7 +10,7 @@ import {
 import { initFontElement, initPositionedElement, initSurfaceElement } from '../../util/unit-interface-initializer';
 
 export class TextFieldElement extends InputElement implements PositionedElement, FontElement, SurfaceElement {
-  appearance: 'standard' | 'legacy' | 'fill' | 'outline' = 'outline';
+  appearance: 'fill' | 'outline' = 'outline';
   minLength: number = 0;
   minLengthWarnMessage: string = 'Eingabe zu kurz';
   maxLength: number = 0;
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
index 6c85a6a3a65dccc18071d1b9a4552e2265395099..cb2394f99b95e360f493fa34e5406943ce978920 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
@@ -275,10 +275,8 @@
     <mat-label>{{'propertiesPanel.appearance' | translate }}</mat-label>
     <mat-select [value]="combinedProperties.appearance"
                 (selectionChange)="updateModel.emit({ property: 'appearance', value: $event.value })">
-      <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
-                                                 {displayValue: 'legacy', value: 'legacy'},
-                                                 {displayValue: 'fill', value: 'fill'},
-                                                 {displayValue: 'outline', value: 'outline'}]"
+      <mat-option *ngFor="let option of [{displayValue: 'fill', value: 'fill'},
+                                         {displayValue: 'outline', value: 'outline'}]"
                   [value]="option.value">
         {{option.displayValue}}
       </mat-option>