diff --git a/.changeset/silver-items-press.md b/.changeset/silver-items-press.md
new file mode 100644
index 0000000000..b78410c2a2
--- /dev/null
+++ b/.changeset/silver-items-press.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Refactored the new focus style to only be visible when using keyboard for form elements.
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index 58fd54bb27..63d4363bc3 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -87,11 +87,16 @@
   outline: none;
 }
 
-@mixin focus-style($border-radius: commons.$border-radius, $vendor-prefix: '') {
-  &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} {
-    outline-offset: spacing.$size-line;
-    outline: spacing.$size-line solid var(--post-focus-color);
-    border-radius: $border-radius;
+@mixin focus-style($vendor-prefix: '') {
+  outline-style: none;
+  outline-offset: spacing.$size-line;
+  outline-width: spacing.$size-line;
+  outline-color: var(--post-focus-color);
+
+  // :has(:focus-visible) mimic a focus-visible-within pseudo-class
+  &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$vendor-prefix} {
+    outline-style: solid;
+    border-radius: commons.$border-radius !important;
 
     @include high-contrast-mode() {
       outline-color: Highlight;
@@ -100,10 +105,33 @@
     // In case rules need to be slightly adjusted
     @content;
   }
+
+  // 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)#{$vendor-prefix} {
+      outline-style: solid;
+      border-radius: commons.$border-radius !important;
+
+      @include high-contrast-mode() {
+        outline-color: Highlight;
+      }
+
+      // In case rules need to be slightly adjusted
+      @content;
+    }
+  }
 }
 
 @mixin focus-style-custom($vendor-prefix: '') {
-  &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} {
+  // :has(:focus-visible) mimic a focus-visible-within pseudo-class
+  &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$vendor-prefix} {
     @content;
   }
+
+  // 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)#{$vendor-prefix} {
+      @content;
+    }
+  }
 }