diff --git a/.changeset/shy-peas-count-2.md b/.changeset/shy-peas-count-2.md
new file mode 100644
index 0000000000..f304ff3515
--- /dev/null
+++ b/.changeset/shy-peas-count-2.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Introduced new focus style for text input and select, and added new wrapper element `.focus-control-wrapper`, `.form-range-wrapper`, `.form-select-wrapper`.
diff --git a/.changeset/shy-peas-count.md b/.changeset/shy-peas-count.md
new file mode 100644
index 0000000000..0c17785184
--- /dev/null
+++ b/.changeset/shy-peas-count.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Made styling more coherent for forms elements with High contrast mode and focus/hover state.
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index fb4aeef83d..8e8414de8c 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -70,7 +70,9 @@
 
     // General styles for content
     a {
-      @include utilities.focus-style();
+      @include utilities.focus-style() {
+        border-radius: post.$border-radius;
+      }
     }
 
     // Style buttons related to the current page next to the tile
diff --git a/packages/documentation/src/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss
index fae7f73886..e59f6fa2f7 100644
--- a/packages/documentation/src/shared/tile/tile.component.scss
+++ b/packages/documentation/src/shared/tile/tile.component.scss
@@ -7,7 +7,9 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
 
 :host{
   a {
-    @include utilities.focus-style();
+    @include utilities.focus-style() {
+      border-radius: post.$border-radius;
+    }
   }
 
   .tile {
diff --git a/packages/documentation/src/stories/components/datepicker/datepicker-floating-label.sample.html b/packages/documentation/src/stories/components/datepicker/datepicker-floating-label.sample.html
index 801d007aec..c6819bb97c 100644
--- a/packages/documentation/src/stories/components/datepicker/datepicker-floating-label.sample.html
+++ b/packages/documentation/src/stories/components/datepicker/datepicker-floating-label.sample.html
@@ -1,4 +1,4 @@
-<div class="form-floating">
+<div class="form-control-wrapper form-floating">
   <input
     #d="ngbDatepicker"
     class="form-control"
diff --git a/packages/documentation/src/stories/components/datepicker/datepicker-navigation-arrows.sample.html b/packages/documentation/src/stories/components/datepicker/datepicker-navigation-arrows.sample.html
index 6ff147e737..dc4fa96f6c 100644
--- a/packages/documentation/src/stories/components/datepicker/datepicker-navigation-arrows.sample.html
+++ b/packages/documentation/src/stories/components/datepicker/datepicker-navigation-arrows.sample.html
@@ -1,4 +1,4 @@
-<div class="position-relative">
+<div class="form-control-wrapper position-relative">
   <input
     #d="ngbDatepicker"
     navigation="arrows"
diff --git a/packages/documentation/src/stories/components/datepicker/datepicker-validation.sample.html b/packages/documentation/src/stories/components/datepicker/datepicker-validation.sample.html
index 6d9afe2327..6034d1a2cc 100644
--- a/packages/documentation/src/stories/components/datepicker/datepicker-validation.sample.html
+++ b/packages/documentation/src/stories/components/datepicker/datepicker-validation.sample.html
@@ -1,4 +1,4 @@
-<div class="position-relative">
+<div class="form-control-wrapper position-relative">
   <input
     #d="ngbDatepicker"
     aria-label="Datepicker"
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index 8cb2b6b661..ac128e7386 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -226,10 +226,14 @@ function render(args: Args, context: StoryContext) {
   `;
   if (args.floatingLabel) {
     return html`
-      <div class="form-floating">${[control, label, ...contextual].filter(el => el !== null)}</div>
+      <div class="form-control-wrapper form-floating">
+        ${[control, label, ...contextual].filter(el => el !== null)}
+      </div>
     `;
   } else {
-    return html` ${[label, control, ...contextual].filter(el => el !== null)} `;
+    return html`<div class="form-control-wrapper">
+      ${[label, control, ...contextual].filter(el => el !== null)}
+    </div>`;
   }
 }
 
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index 0843424c5e..1f3b2f2624 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -278,12 +278,14 @@ const Template: Story = {
 
     if (args.floatingLabel) {
       return html`
-        <div class="form-floating">
+        <div class="form-select-wrapper form-floating">
           ${[control, label, ...contextuals].filter(el => el !== null)}
         </div>
       `;
     } else {
-      return html` ${[label, control, ...contextuals].filter(el => el !== null)} `;
+      return html`<div class="form-select-wrapper">
+        ${[label, control, ...contextuals].filter(el => el !== null)}
+      </div>`;
     }
   },
 };
diff --git a/packages/documentation/src/stories/components/forms/slider/slider.stories.ts b/packages/documentation/src/stories/components/forms/slider/slider.stories.ts
index 41c912e78e..1487e259d0 100644
--- a/packages/documentation/src/stories/components/forms/slider/slider.stories.ts
+++ b/packages/documentation/src/stories/components/forms/slider/slider.stories.ts
@@ -228,12 +228,18 @@ function render(args: Args, context: StoryContext) {
   if (args.showValue === 'input') {
     return html`
       <div class="row align-items-end">
-        <div class="col">${[label, control, ...contextual].filter(el => el !== null)}</div>
+        <div class="col">
+          <div class="form-range-wrapper">
+            ${[label, control, ...contextual].filter(el => el !== null)}
+          </div>
+        </div>
         <div class="col-auto">${valueElement}</div>
       </div>
     `;
   } else {
-    return html` ${[label, control, valueElement, ...contextual].filter(el => el !== null)} `;
+    return html`<div class="form-range-wrapper">
+      ${[label, control, valueElement, ...contextual].filter(el => el !== null)}
+    </div>`;
   }
 }
 
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 12cae94515..182d33fef2 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -195,9 +195,14 @@ ${args.textInside ?? nothing}</textarea
   `;
   if (args.floatingLabel) {
     return html`
-      <div class="form-floating">${[control, label, ...contextual].filter(el => el !== null)}</div>
+      <div class="form-control-wrapper form-floating">
+        ${[control, label, ...contextual].filter(el => el !== null)}
+      </div>
     `;
-  } else return html` ${[label, control, ...contextual].filter(el => el !== null)} `;
+  } else
+    return html`<div class="form-control-wrapper">
+      ${[label, control, ...contextual].filter(el => el !== null)}
+    </div>`;
 }
 
 export const Default: Story = {};
diff --git a/packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html b/packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html
index 053bde3e8a..382e9effe3 100644
--- a/packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html
+++ b/packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html
@@ -1,4 +1,4 @@
-<div class="form-floating mb-3">
+<div class="form-control-wrapper form-floating mb-3">
   <input
     id="typeahead-basic"
     placeholder=" "
diff --git a/packages/documentation/src/stories/components/typeahead/typeahead.sample.html b/packages/documentation/src/stories/components/typeahead/typeahead.sample.html
index 053bde3e8a..382e9effe3 100644
--- a/packages/documentation/src/stories/components/typeahead/typeahead.sample.html
+++ b/packages/documentation/src/stories/components/typeahead/typeahead.sample.html
@@ -1,4 +1,4 @@
-<div class="form-floating mb-3">
+<div class="form-control-wrapper form-floating mb-3">
   <input
     id="typeahead-basic"
     placeholder=" "
diff --git a/packages/documentation/src/stories/patterns/forms/forms.stories.ts b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
index cdf72b9179..9203c5e297 100644
--- a/packages/documentation/src/stories/patterns/forms/forms.stories.ts
+++ b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
@@ -16,8 +16,10 @@ type Story = StoryObj;
 
 export const BasicInput: Story = {
   render: () => html`
-    <label class="form-label" for="firstname">Firstname</label>
-    <input type="text" id="firstname" class="form-control" />
+    <div class="form-control-wrapper"></div>
+      <label class="form-label" for="firstname">Firstname</label>
+      <input type="text" id="firstname" class="form-control" />
+    </div>
   `,
 };
 
@@ -25,12 +27,16 @@ export const RowSimple: Story = {
   render: () => html`
     <div class="row row-cols-1 row-cols-md-2">
       <div class="col">
-        <label class="form-label" for="firstname">Firstname</label>
-        <input type="text" id="firstname" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="firstname">Firstname</label>
+          <input type="text" id="firstname" class="form-control" />
+        </div>
       </div>
       <div class="col">
-        <label class="form-label" for="lastname">Lastname</label>
-        <input type="text" id="lastname" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="lastname">Lastname</label>
+          <input type="text" id="lastname" class="form-control" />
+        </div>
       </div>
     </div>
   `,
@@ -40,12 +46,16 @@ export const ColSimple: Story = {
   render: () => html`
     <div class="row">
       <div class="col-8">
-        <label class="form-label" for="city">City</label>
-        <input type="text" id="city" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="city">City</label>
+          <input type="text" id="city" class="form-control" />
+        </div>
       </div>
       <div class="col-4">
-        <label class="form-label" for="state">State</label>
-        <input type="text" id="state" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="state">State</label>
+          <input type="text" id="state" class="form-control" />
+        </div>
       </div>
     </div>
   `,
@@ -55,12 +65,16 @@ export const CustomWidth: Story = {
   render: () => html`
     <div class="row">
       <div class="col-auto">
-        <label class="form-label" for="zip">Zip</label>
-        <input type="number" id="zip" class="form-control" style="max-width: 11ch" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="zip">Zip</label>
+          <input type="number" id="zip" class="form-control" style="max-width: 11ch" />
+        </div>
       </div>
       <div class="col">
-        <label class="form-label" for="city">City</label>
-        <input type="text" id="city" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="city">City</label>
+          <input type="text" id="city" class="form-control" />
+        </div>
       </div>
     </div>
   `,
@@ -69,12 +83,16 @@ export const CustomWidth: Story = {
 export const VerticalSpacing: Story = {
   render: () => html`
     <div class="mb-regular">
-      <label for="firstname">Firstname</label>
-      <input type="text" id="firstname" class="form-control" />
+      <div class="form-control-wrapper">
+        <label for="firstname">Firstname</label>
+        <input type="text" id="firstname" class="form-control" />
+      </div>
     </div>
     <div class="mb-regular">
-      <label for="lastname">Lastname</label>
-      <input type="text" id="lastname" class="form-control" />
+      <div class="form-control-wrapper">
+        <label for="lastname">Lastname</label>
+        <input type="text" id="lastname" class="form-control" />
+      </div>
     </div>
   `,
 };
@@ -82,12 +100,16 @@ export const VerticalSpacing: Story = {
 export const Buttons: Story = {
   render: () => html`
     <div class="mb-regular">
-      <label for="firstname">Firstname</label>
-      <input type="text" id="firstname" class="form-control" />
+      <div class="form-control-wrapper">
+        <label for="firstname">Firstname</label>
+        <input type="text" id="firstname" class="form-control" />
+      </div>
     </div>
     <div class="d-flex flex-row-reverse gap-mini">
-      <button class="btn btn-primary">Send</button>
-      <button class="btn btn-secondary">Cancel</button>
+      <div class="form-control-wrapper">
+        <button class="btn btn-primary">Send</button>
+        <button class="btn btn-secondary">Cancel</button>
+      </div>
     </div>
   `,
 };
@@ -96,13 +118,13 @@ export const FloatingLabels: Story = {
   render: () => html`
     <div class="row">
       <div class="col">
-        <div class="form-floating">
+        <div class="form-control-wrapper form-floating">
           <input type="text" id="firstname" class="form-control" placeholder=" " />
           <label class="form-label" for="firstname">Firstname</label>
         </div>
       </div>
       <div class="col">
-        <div class="form-floating">
+        <div class="form-control-wrapper form-floating">
           <input type="text" id="lastname" class="form-control" placeholder=" " />
           <label class="form-label" for="lastname">Lastname</label>
         </div>
@@ -117,7 +139,7 @@ export const Validation: Story = {
       <!-- Form Control -->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <input
               id="formControlInvalid"
               type="text"
@@ -130,7 +152,7 @@ export const Validation: Story = {
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <input
               id="FormControlValid"
               type="text"
@@ -147,14 +169,14 @@ export const Validation: Story = {
       <!-- Form Select -->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-select-wrapper form-floating">
             <select id="FormSelectInvalid" class="form-select is-invalid" required></select>
             <label class="form-label" for="FormSelectInvalid">Invalid Select</label>
             <p class="invalid-feedback">Error message</p>
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-select-wrapper form-floating">
             <select id="FormSelectValid" class="form-select is-valid">
               <option disabled>Select one..</option>
               <option value="1">Value 1</option>
@@ -169,7 +191,7 @@ export const Validation: Story = {
       <!-- Form Select Multiple-->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-select-wrapper form-floating">
             <select
               id="FormSelectMultipleInvalid"
               class="form-select is-invalid"
@@ -183,7 +205,7 @@ export const Validation: Story = {
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-select-wrapper form-floating">
             <select id="FormSelectMultipleValid" class="form-select is-valid" multiple>
               <option value="1">Value 1</option>
               <option value="2">Value 2</option>
@@ -197,14 +219,14 @@ export const Validation: Story = {
       <!-- Form File -->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <input id="FormFileInvalid" type="file" class="form-control is-invalid" required />
             <label class="form-label" for="FormFileInvalid">Invalid File</label>
             <p class="invalid-feedback">Error message</p>
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <input id="FormFileValid" type="file" class="form-control is-valid" />
             <label class="form-label" for="FormFileValid">Valid File</label>
             <p class="valid-feedback">Success message (optional)</p>
@@ -215,7 +237,7 @@ export const Validation: Story = {
       <!-- Form Textarea -->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <textarea
               id="FormTextareaInvalid"
               type="text"
@@ -228,7 +250,7 @@ export const Validation: Story = {
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <textarea
               id="FormTextareaValid"
               type="text"
@@ -287,14 +309,18 @@ Value</textarea
       <!-- Form Range -->
       <div class="row mb-regular">
         <div class="col">
-          <label class="form-label" for="FormRangeInvalid">Invalid Range</label>
-          <input class="form-range is-invalid" id="FormRangeInvalid" type="range" />
-          <p class="invalid-feedback">Error message</p>
+          <div class="form-range-wrapper">
+            <label class="form-label" for="FormRangeInvalid">Invalid Range</label>
+            <input class="form-range is-invalid" id="FormRangeInvalid" type="range" />
+            <p class="invalid-feedback">Error message</p>
+          </div>
         </div>
         <div class="col">
-          <label class="form-label" for="FormRangeValid">Valid Range</label>
-          <input class="form-range is-valid" id="FormRangeValid" type="range" />
-          <p class="valid-feedback">Success message (optional)</p>
+          <div class="form-range-wrapper">
+            <label class="form-label" for="FormRangeValid">Valid Range</label>
+            <input class="form-range is-valid" id="FormRangeValid" type="range" />
+            <p class="valid-feedback">Success message (optional)</p>
+          </div>
         </div>
       </div>
 
@@ -332,7 +358,7 @@ Value</textarea
 
 export const Hints: Story = {
   render: () => html`
-    <div class="form-floating">
+    <div class="form-control-wrapper form-floating">
       <input
         type="text"
         id="firstname"
diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 1406a4a93e..cbdc7097d1 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -5,6 +5,7 @@
 
 @use './../variables/components/button';
 @use './../variables/color';
+@use './../variables/commons';
 @use './../variables/type';
 @use './../variables/spacing';
 @use './../mixins/color' as color-mx;
@@ -18,7 +19,9 @@
 
 .btn {
   @include button-mx.button-size();
-  @include utilities.focus-style();
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
 
   // Resets
   display: inline-flex;
diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
index f170586bc2..266c5376e8 100644
--- a/packages/styles/src/components/form-check.scss
+++ b/packages/styles/src/components/form-check.scss
@@ -16,7 +16,7 @@
   margin-bottom: form-check.$form-check-margin-bottom;
 
   @include utility-mx.focus-style() {
-    border-radius: commons.$border-radius !important;
+    border-radius: commons.$border-radius;
   }
 
   &-inline {
@@ -32,8 +32,8 @@
     color: rgba(var(--post-contrast-color-rgb), 0.8);
     transition: color animation.$transition-base-timing;
 
-    &:not([disabled]) {
-      cursor: pointer;
+    @include utility-mx.high-contrast-mode {
+      transition: none;
     }
 
     &:hover:not([disabled]),
@@ -43,6 +43,11 @@
   }
 
   &-input {
+    &:not([disabled]),
+    &:not([disabled]) ~ .form-check-label {
+      cursor: pointer;
+    }
+
     @include utility-mx.focus-style-none();
     display: inline-flex;
     flex: 0 auto;
@@ -53,6 +58,18 @@
     border: form-check.$form-check-input-border-width solid
       rgba(var(--post-contrast-color-rgb), 0.8);
 
+    @include utility-mx.high-contrast-mode {
+      border-color: FieldText; // For blink-browser as otherwise the default color (which is not a full color) will be converted to Highlight
+    }
+
+    @include utility-mx.high-contrast-mode() {
+      &:not(:disabled) {
+        &:hover {
+          border-color: Highlight;
+        }
+      }
+    }
+
     &::after {
       content: '';
       display: block;
@@ -64,6 +81,10 @@
       color: var(--post-contrast-color);
       border-color: var(--post-contrast-color);
 
+      @include utility-mx.high-contrast-mode {
+        border-color: FieldText; // Firefox need explicit declaration here
+      }
+
       ~ .form-check-label {
         color: var(--post-contrast-color);
       }
@@ -77,6 +98,39 @@
       &:indeterminate::after {
         @include icons-mx.icon(2039);
       }
+
+      &:checked,
+      &:indeterminate {
+        @include utility-mx.high-contrast-mode {
+          background-color: SelectedItem !important;
+          color: SelectedItemText !important; // Important is needed for card-control
+        }
+      }
+    }
+
+    &[disabled] {
+      &[type='checkbox'],
+      &[type='radio'] {
+        border-color: GrayText !important;
+      }
+
+      &[type='checkbox'] {
+        &:checked,
+        &:indeterminate {
+          @include utility-mx.high-contrast-mode {
+            background-color: Field !important;
+            color: GrayText !important;
+          }
+        }
+      }
+
+      &[type='radio'] {
+        &:checked::after {
+          @include utility-mx.high-contrast-mode {
+            background-color: GrayText;
+          }
+        }
+      }
     }
 
     &[type='radio'] {
@@ -87,6 +141,11 @@
         background-color: currentColor;
         border-radius: inherit;
         background-clip: padding-box;
+
+        @include utility-mx.high-contrast-mode {
+          background-color: SelectedItem;
+          border-color: Canvas;
+        }
       }
     }
 
@@ -158,7 +217,7 @@
       border: form-check.$form-check-input-border-width solid CanvasText;
 
       &:checked {
-        background-color: SelectedItem;
+        background-color: SelectedItem !important;
       }
 
       &::after,
@@ -177,6 +236,16 @@
       &::after {
         border-color: form-check.$form-switch-disabled-border-color;
       }
+
+      @include utility-mx.high-contrast-mode {
+        &::after {
+          border-color: Field;
+        }
+
+        &:checked {
+          background-color: GrayText !important;
+        }
+      }
     }
   }
 
@@ -185,12 +254,6 @@
 
     @include utility-mx.high-contrast-mode {
       border-color: Highlight;
-
-      &:checked,
-      &::after,
-      &:checked::after {
-        background-color: Highlight;
-      }
     }
   }
 
diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss
index b1754e3f39..0ac087a2e0 100644
--- a/packages/styles/src/components/form-range.scss
+++ b/packages/styles/src/components/form-range.scss
@@ -14,16 +14,16 @@ $track-height: 4px;
 $webkit-progress-height-adjustment: 2px;
 $webkit-thumb-width: 32px;
 
-:has(> .form-range) {
+.form-range-wrapper {
   @include utilities.focus-style() {
-    border-radius: commons.$border-radius !important;
+    border-radius: commons.$border-radius;
   }
 }
 
-@supports not selector(:has(> .form-range)) {
+:not(.form-range-wrapper) > {
   .form-range {
     @include utilities.focus-style() {
-      border-radius: commons.$border-radius !important;
+      border-radius: commons.$border-radius;
     }
   }
 }
@@ -87,8 +87,11 @@ $webkit-thumb-width: 32px;
       }
     }
 
-    @include utilities.focus-style-custom('::-moz-range-thumb') {
+    &:focus::-moz-range-thumb {
       box-shadow: none; // Remove default style
+    }
+
+    @include utilities.focus-style-custom('::-moz-range-thumb') {
       outline: none;
     }
   }
@@ -149,13 +152,29 @@ $webkit-thumb-width: 32px;
         background-color: ButtonFace;
         border-color: ButtonText;
       }
+
+      &:hover {
+        &::-webkit-slider-thumb {
+          border-color: Highlight;
+        }
+
+        &::-moz-range-thumb {
+          border-color: Highlight;
+        }
+      }
     }
 
     &:disabled,
     &.disabled {
+      &::-moz-range-progress {
+        background-color: GrayText !important;
+      }
+
       &::-webkit-slider-thumb {
         background-color: ButtonFace;
         border-color: GrayText;
+
+        box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw GrayText !important;
       }
 
       &::-moz-range-thumb {
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index acf709a07d..b2ce1812e1 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -6,17 +6,59 @@
 @use './../mixins/forms' as forms-mixins;
 @use './../mixins/utilities';
 
+@use './../variables/commons';
 @use './../variables/components/forms';
 @use './../variables/components/form-select' as form-select;
 
+.form-select-wrapper {
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
+}
+
+:not(.form-select-wrapper) > {
+  .form-select {
+    @include utilities.focus-style() {
+      border-radius: commons.$border-radius;
+    }
+  }
+}
+
 .form-select {
   --form-select-indicator: #{form-select.$form-select-indicator};
   --form-select-indicator-success: #{b.escape-svg(form-select.$form-select-indicator-success)};
   --form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error)};
 
+  &:focus {
+    box-shadow: none; // Override bootstrap
+
+    @include utilities.high-contrast-mode {
+      border-color: FieldText !important;
+    }
+  }
+
   &:not(:disabled) {
-    &:hover {
+    &:hover,
+    &:focus {
       border-color: var(--post-contrast-color);
+
+      @include utilities.high-contrast-mode {
+        border-color: FieldText;
+      }
+    }
+
+    &:hover {
+      @include utilities.high-contrast-mode {
+        border-color: Highlight;
+      }
+    }
+  }
+
+  &:disabled {
+    @include utilities.high-contrast-mode {
+      border-color: GrayText !important;
+      background-color: Field !important;
+      color: GrayText;
     }
   }
 
@@ -91,11 +133,6 @@
     &:focus-visible {
       color: FieldText;
     }
-
-    &:focus,
-    &:hover:not(:disabled) {
-      border-color: Highlight;
-    }
   }
 }
 
diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
index 6969c2e9ba..a43207e9c0 100644
--- a/packages/styles/src/components/form-validation.scss
+++ b/packages/styles/src/components/form-validation.scss
@@ -23,9 +23,7 @@
   font-size: form-validation.$form-feedback-font-size;
 
   @include utilities-mx.high-contrast-mode() {
-    color: MarkText !important;
-    background-color: Mark !important;
-    forced-color-adjust: none;
+    padding-inline: 0;
   }
 }
 
@@ -102,37 +100,41 @@
 .form-select {
   &.is-invalid {
     border-color: form-validation.$form-feedback-invalid-color;
-    background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
-
-    @include utilities-mx.high-contrast-mode() {
-      background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark);
-
-      @media (prefers-color-scheme: light) {
-        background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light);
-      }
-    }
 
     &:focus {
       border-color: form-validation.$form-feedback-invalid-color;
-      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
     }
-  }
 
-  &.is-valid {
-    border-color: var(--post-success);
-    background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
+    &:not(&[type='file']) {
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
 
-    @include utilities-mx.high-contrast-mode() {
-      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark);
+      @include utilities-mx.high-contrast-mode() {
+        background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark);
 
-      @media (prefers-color-scheme: light) {
-        background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-light);
+        @media (prefers-color-scheme: light) {
+          background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light);
+        }
       }
     }
+  }
+
+  &.is-valid {
+    border-color: var(--post-success);
 
     &:focus {
       border-color: form-validation.$form-feedback-valid-color;
-      box-shadow: form-validation.$form-feedback-valid-box-shadow;
+    }
+
+    &:not(&[type='file']) {
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
+
+      @include utilities-mx.high-contrast-mode() {
+        background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark);
+
+        @media (prefers-color-scheme: light) {
+          background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-light);
+        }
+      }
     }
   }
 
@@ -161,10 +163,6 @@
   @include form-validation-mx.form-validation-state-selector(invalid) {
     border-color: form-validation.$form-feedback-invalid-color;
 
-    &:focus {
-      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
-    }
-
     ~ .form-check-label {
       color: form-validation.$form-feedback-invalid-color;
     }
@@ -176,5 +174,9 @@
         color: color.$white;
       }
     }
+
+    @include utilities-mx.high-contrast-mode {
+      border-color: FieldText; // For blink-browser as otherwise the invalid color will be converted to Highlight
+    }
   }
 }
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index 9e3feb498f..f9aecc81a1 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -2,6 +2,7 @@
 
 @use './../lic/bootstrap-license';
 
+@use './../variables/commons';
 @use './../variables/components/forms';
 
 @use './../mixins/utilities';
@@ -28,11 +29,54 @@ select.form-control-rg:not([size]):not([multiple]) {
   height: forms.$input-height-rg;
 }
 
+.form-control-wrapper {
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
+}
+
+:not(.form-control-wrapper) > {
+  .form-control {
+    @include utilities.focus-style() {
+      border-radius: commons.$border-radius;
+    }
+  }
+}
+
 .form-control {
   position: relative;
 
+  &:focus {
+    box-shadow: none; // Override bootstrap
+
+    @include utilities.high-contrast-mode {
+      border-color: FieldText !important; // On blink browser valid and invalid border colors are converted to Highlight color
+    }
+  }
+
+  &:not(:disabled) {
+    &:hover,
+    &:focus {
+      @include utilities.high-contrast-mode {
+        border-color: FieldText;
+      }
+    }
+
+    &:hover {
+      @include utilities.high-contrast-mode {
+        border-color: Highlight;
+      }
+    }
+  }
+
   &:disabled {
     color: forms.$input-disabled-color;
+
+    @include utilities.high-contrast-mode {
+      border-color: GrayText !important;
+      background-color: Field !important;
+      color: GrayText;
+    }
   }
 
   &[readonly]:not(:disabled) {
@@ -43,6 +87,13 @@ select.form-control-rg:not([size]):not([multiple]) {
   &[type='file'] {
     position: relative;
 
+    &:disabled {
+      @include utilities.high-contrast-mode {
+        color: GrayText; // Needed for the button on blink browser, even if we define it on .form-control:disabled
+        border-color: GrayText;
+      }
+    }
+
     &::file-selector-button {
       display: block;
       position: absolute;
@@ -133,17 +184,4 @@ select.form-control-rg:not([size]):not([multiple]) {
       }
     }
   }
-
-  @include utilities.high-contrast-mode() {
-    &:hover,
-    &:focus {
-      &:not(:disabled) {
-        border-color: Highlight;
-
-        &::file-selector-button {
-          border-left-color: Highlight;
-        }
-      }
-    }
-  }
 }
diff --git a/packages/styles/src/components/intranet-header/_sidebar.scss b/packages/styles/src/components/intranet-header/_sidebar.scss
index 15f427393e..6bc9cbfa81 100644
--- a/packages/styles/src/components/intranet-header/_sidebar.scss
+++ b/packages/styles/src/components/intranet-header/_sidebar.scss
@@ -1,7 +1,7 @@
 @use './../../mixins/utilities';
 @use './../../variables/color';
-@use './../../variables/spacing';
 @use './../../variables/commons';
+@use './../../variables/spacing';
 @use './../../variables/components/intranet-header';
 
 @use './../../themes/bootstrap/core' as *;
@@ -27,7 +27,9 @@
       background: none;
       border: 0;
 
-      @include utilities.focus-style();
+      @include utilities.focus-style() {
+        border-radius: commons.$border-radius;
+      }
     }
   }
 
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index b28b1d2ae9..a48ebb623e 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -89,18 +89,18 @@
 
 @mixin focus-style($additional-selector: '') {
   &#{$additional-selector} {
-    outline-style: none;
-    outline-offset: spacing.$size-line;
-    outline-width: spacing.$size-line;
-    outline-color: var(--post-focus-color);
+    outline-style: none !important; // !important is needed to override bootstrap .form-control:focus
+    outline-offset: spacing.$size-line !important;
+    outline-width: spacing.$size-line !important;
+    outline-color: var(--post-focus-color) !important;
   }
 
   // :has(:focus-visible) mimic a focus-visible-within pseudo-class
   &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$additional-selector} {
-    outline-style: solid;
+    outline-style: solid !important;
 
     @include high-contrast-mode() {
-      outline-color: Highlight;
+      outline-color: Highlight !important;
     }
 
     // In case rules need to be slightly adjusted
@@ -110,10 +110,10 @@
   // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
   @supports not selector(:has(:focus-visible)) {
     &:is(:focus-visible, :focus-within, .pretend-focus)#{$additional-selector} {
-      outline-style: solid;
+      outline-style: solid !important;
 
       @include high-contrast-mode() {
-        outline-color: Highlight;
+        outline-color: Highlight !important;
       }
 
       // In case rules need to be slightly adjusted
diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss
index 19dfbc6c4f..08b424ab08 100644
--- a/packages/styles/src/placeholders/_close.scss
+++ b/packages/styles/src/placeholders/_close.scss
@@ -6,11 +6,14 @@
 
 @use './../variables/animation';
 @use './../variables/color';
+@use './../variables/commons';
 @use './../variables/components/close';
 
 %btn-close {
   @include button-mx.reset-button;
-  @include utilities-mx.focus-style();
+  @include utilities-mx.focus-style() {
+    border-radius: commons.$border-radius;
+  }
   border-radius: close.$close-border-radius;
   color: close.$close-color;
   transition: close.$close-transition;
diff --git a/packages/styles/src/placeholders/_color.scss b/packages/styles/src/placeholders/_color.scss
index 7b9e5e7bed..62b23abbc2 100644
--- a/packages/styles/src/placeholders/_color.scss
+++ b/packages/styles/src/placeholders/_color.scss
@@ -54,7 +54,7 @@
 // dark background variables
 %color-background-dark-variables {
   --post-contrast-color: #{color.$white};
-  --post-focus-color: #{color.$white};
+  --post-focus-color: #{color.$focus-dark};
   --post-contrast-color-inverted: #{color.$black};
   --post-dark: #{color.$light};
   --post-light: #{color.$dark};