diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index 3d0497822a034835088d5040ac44d53879ff7df8..bc5bfeae2ec42212e322467b00c9818059d4bb1d 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -1,5 +1,10 @@
 Player
 ======
+1.11.0
+- For spelling element use the same font properties for input field and button
+- Change cross out behaviour of spelling element. The button now behaves as
+  toggle button and sets the focus to the input element only when it is crossed through.
+
 1.10.0
  - Add virtual keyboard for comparison operators only
  - Fix volume setting of audios and videos
diff --git a/projects/common/ui-elements/spell-correct/spell-correct.component.ts b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
index da8b650121d91f6290226d881b96f57173b188df..4db5c1dbcc9d9fe24c1e7a2ddd9f5aa8c8dce490 100644
--- a/projects/common/ui-elements/spell-correct/spell-correct.component.ts
+++ b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { MatInput } from '@angular/material/input';
 import { FormElementComponent } from '../../directives/form-element-component.directive';
 import { SpellCorrectElement } from './spell-correct-element';
@@ -16,22 +16,38 @@ import { SpellCorrectElement } from './spell-correct-element';
                [style.text-align]="'center'"
                autocomplete="off"
                [readonly]="elementModel.readOnly"
+               [style.color]="elementModel.fontProps.fontColor"
+               [style.font-family]="elementModel.fontProps.font"
+               [style.font-size.px]="elementModel.fontProps.fontSize"
+               [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+               [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+               [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
                [value]="elementModel.value"
                [formControl]="elementFormControl">
       </mat-form-field>
-      <button mat-button
+      <button #buttonElement
+          mat-button
               type="button"
               [disabled]="elementModel.readOnly"
               [style.color]="elementModel.fontProps.fontColor"
               [style.font-family]="elementModel.fontProps.font"
               [style.font-size.px]="elementModel.fontProps.fontSize"
-              [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+              [style.font-weight]="elementModel.fontProps.bold ? 'bold' : '400'"
               [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+              [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
               [style.width.%]="100"
               [style.margin-top]="'-20px'"
-              [style.text-decoration-line]="strikethrough ? 'line-through' : ''"
-              (click)="onClick()">
-        &nbsp;{{elementModel.label}}&nbsp;
+              [style.text-decoration-line]=
+                  "(inputElement && inputElement.focused) ||
+                  (inputElement && !!inputElement.value) ||
+                  (elementFormControl && elementFormControl.value === '') ? 'line-through' : ''"
+              (click)="
+              elementFormControl.value === null ?
+              inputElement.focus() :
+              buttonElement.focus();
+              elementFormControl.value === null ?
+              (elementFormControl.setValue('')) :
+              elementFormControl.setValue(null)">{{elementModel.label}}
       </button>
     </div>
   `,
@@ -39,23 +55,8 @@ import { SpellCorrectElement } from './spell-correct-element';
     '::ng-deep app-spell-correct .small-input div.mat-form-field-infix {border-top: none; padding: 0.75em 0 0.25em 0;}'
   ]
 })
-export class SpellCorrectComponent extends FormElementComponent implements OnInit {
+export class SpellCorrectComponent extends FormElementComponent {
   elementModel!: SpellCorrectElement;
-  strikethrough!: boolean;
 
   @ViewChild(MatInput) inputElement!: MatInput;
-
-  strikeOut(): boolean {
-    this.strikethrough = (this.inputElement && this.inputElement.value) ? this.inputElement.value.length > 0 : false;
-    return this.strikethrough;
-  }
-
-  onClick() : void {
-    if (this.strikeOut()) {
-      this.elementFormControl.setValue('');
-    } else {
-      this.elementFormControl.setValue(this.elementModel.label);
-      this.inputElement.focus();
-    }
-  }
 }