diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
index 63c2bdb3766ef947ef6f6891fde0f1485c25941d..216ce06b1c428411f757daa2b8377d1fb6a3a438 100644
--- a/projects/common/element-components/text-area.component.ts
+++ b/projects/common/element-components/text-area.component.ts
@@ -13,7 +13,8 @@ import { FormElementComponent } from '../form-element-component.directive';
                     [style.font-size.px]="elementModel.fontSize"
                     [style.font-weight]="elementModel.bold ? 'bold' : ''"
                     [style.font-style]="elementModel.italic ? 'italic' : ''"
-                    [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+                    [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+                    [appearance]="$any(elementModel.appearance)">
     <textarea matInput [formControl]="elementFormControl" #input
               (focus)="onFocus.emit(input)"
               (blur)="onBlur.emit(input)"
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 6bebb69596c9ca06adec7b5e3cfcecfa2ed41fda..29a3c3aedbe396c6341e6e05ba5a32ce7b5b426a 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -13,7 +13,8 @@ import { FormElementComponent } from '../form-element-component.directive';
                     [style.font-size.px]="elementModel.fontSize"
                     [style.font-weight]="elementModel.bold ? 'bold' : ''"
                     [style.font-style]="elementModel.italic ? 'italic' : ''"
-                    [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+                    [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+                    [appearance]="$any(elementModel.appearance)">
       <input matInput type="text" [pattern]="elementModel.pattern" #input
              (focus)="onFocus.emit(input)"
              (blur)="onBlur.emit(input)"
diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index 5dc73598c45e3206227275521ddc022b684fcb0b..4938384d6e146c038d16009d6089c9935f347aee 100644
--- a/projects/common/unit.ts
+++ b/projects/common/unit.ts
@@ -82,6 +82,7 @@ export interface ButtonElement extends TextUIElement, SurfaceUIElement {
 
 export interface TextFieldElement extends InputUIElement, TextUIElement, SurfaceUIElement {
   value: string;
+  appearance: 'standard' | 'legacy' | 'fill' | 'outline';
   minLength: number | undefined;
   minLengthWarnMessage: string;
   maxLength: number | undefined;
@@ -92,6 +93,7 @@ export interface TextFieldElement extends InputUIElement, TextUIElement, Surface
 
 export interface TextAreaElement extends InputUIElement, TextUIElement, SurfaceUIElement {
   value: string;
+  appearance: 'standard' | 'legacy' | 'fill' | 'outline';
   resizeEnabled: boolean;
 }
 
diff --git a/projects/editor/src/app/UnitFactory.ts b/projects/editor/src/app/UnitFactory.ts
index 2f8e043ed217883840bac441adf33f37e62a02c1..cdc6c329dfbf2877fefce0bbcd41bcc113ccc14a 100644
--- a/projects/editor/src/app/UnitFactory.ts
+++ b/projects/editor/src/app/UnitFactory.ts
@@ -112,6 +112,7 @@ export function createButtonElement(): ButtonElement {
 
 export function createTextfieldElement(): TextFieldElement {
   return <TextFieldElement>{
+    appearance: 'outline',
     minLength: undefined,
     minLengthWarnMessage: 'Eingabe zu kurz',
     maxLength: undefined,
@@ -129,6 +130,7 @@ export function createTextfieldElement(): TextFieldElement {
 export function createTextareaElement(): TextAreaElement {
   return <TextAreaElement>{
     resizeEnabled: false,
+    appearance: 'outline',
     ...createUnitUIElement('text-area'),
     ...createInputUIElement('Beispiel Beschriftung', ''),
     ...createTextUIElement(),
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
index d57872262c236ea9527d643a1e36a58f68ec1e8d..45c7581a2b5d5cd19449ee54f4ae7534cbe5387a 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
@@ -23,6 +23,22 @@
              (click)="unitService.showDefaultEditDialog(selectedElements[0])">
         </div>
 
+
+        <mat-form-field *ngIf="combinedProperties.hasOwnProperty('appearance')" appearance="fill">
+          <mat-label>Aussehen</mat-label>
+          <mat-select [value]="combinedProperties.appearance"
+                      (selectionChange)="updateModel('appearance', $event.value)">
+            <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
+                                               {displayValue: 'legacy', value: 'legacy'},
+                                               {displayValue: 'fill', value: 'fill'},
+                                               {displayValue: 'outline', value: 'outline'}]"
+                        [value]="option.value">
+              {{option.displayValue}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+
         <mat-checkbox *ngIf="combinedProperties.hasOwnProperty('highlightable')"
                       [checked]="$any(combinedProperties.highlightable)"
                       (change)="updateModel('highlightable', $event.checked)">