diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
index bc0b2dea19a..99d8ea27249 100755
--- a/packages/calcite-components/src/components/input/input.scss
+++ b/packages/calcite-components/src/components/input/input.scss
@@ -33,6 +33,11 @@
  *
  */
 
+@mixin input-placeholder-styles {
+  @apply font-normal;
+  color: var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3));
+}
+
 :host {
   @apply block;
 }
@@ -155,17 +160,27 @@ input {
     block-size 0,
     outline-offset 0s;
   -webkit-appearance: none;
-  &::placeholder,
-  &:-ms-input-placeholder,
-  &::-ms-input-placeholder {
-    @apply font-normal;
-    color: var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3));
-  }
+
   &:placeholder-shown {
     @apply text-ellipsis;
   }
 }
 
+// Placeholder styles
+// Do not combine these style rules. The browser interprets the rule as one. When combined, properties like -ms can not be found in non-Microsoft browsers and thus the whole selector is invalidated and is ignored.
+:-ms-input-placeholder {
+  @include input-placeholder-styles;
+}
+
+::-ms-input-placeholder {
+  @include input-placeholder-styles;
+}
+
+::placeholder {
+  @include input-placeholder-styles;
+}
+// End Placeholder styles
+
 textarea {
   border-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
 }