diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss
index 40b3bb457..9f0e1110f 100644
--- a/src/components/date-picker/themes/shared/date-picker.common.scss
+++ b/src/components/date-picker/themes/shared/date-picker.common.scss
@@ -66,7 +66,7 @@ $input-theme: input-theme.$material;
     }
 }
 
-:host(:not([readonly])) {
+:host(:not([disabled],[readonly])) {
     --affix-color: #{var-get($theme, 'input-prefix-color')};
 
     igc-date-time-input[readonly] {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
index be4a3c1b3..faec8d039 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
@@ -37,7 +37,7 @@ $theme: $indigo;
     }
 }
 
-:host(:not([readonly]):hover) {
+:host(:not([readonly],[disabled]):hover) {
     igc-input[readonly]::part(container),
     igc-date-time-input:hover::part(container) {
         background: var-get($theme, 'box-background-hover');
diff --git a/src/components/input/themes/shared/input.common.scss b/src/components/input/themes/shared/input.common.scss
index b9a8c9c99..25b77cd52 100644
--- a/src/components/input/themes/shared/input.common.scss
+++ b/src/components/input/themes/shared/input.common.scss
@@ -30,7 +30,7 @@ $theme: $base;
 }
 
 :host(:focus-within),
-:host(:not([readonly]):hover) {
+:host(:not([readonly],[disabled]):hover) {
     [part~='input']::placeholder {
         color: var-get($theme, 'hover-placeholder-color');
     }
diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss
index ceb15946b..ed1770dd4 100644
--- a/src/components/input/themes/shared/input.fluent.scss
+++ b/src/components/input/themes/shared/input.fluent.scss
@@ -95,7 +95,7 @@ $theme: $fluent;
     }
 }
 
-:host(:not([readonly], :focus-within):hover) {
+:host(:not([readonly], [disabled], :focus-within):hover) {
     [part^='container'] {
         &::before {
             // The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
@@ -121,7 +121,7 @@ $theme: $fluent;
     }
 }
 
-:host([aria-haspopup]:not([readonly], :focus-within):hover) {
+:host([aria-haspopup]:not([readonly], [disabled], :focus-within):hover) {
     [part^='container'] {
         &::before {
             color: var-get($theme, 'hover-border-color');
diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss
index 50f900fc5..e1e31fefb 100644
--- a/src/components/input/themes/shared/input.indigo.scss
+++ b/src/components/input/themes/shared/input.indigo.scss
@@ -125,8 +125,8 @@ $transition-duration: .25s;
     }
 }
 
-:host(:not([readonly]):hover),
-:host([readonly][role='combobox']:hover) {
+:host(:not([disabled],[readonly]):hover),
+:host(:not([disabled])[readonly][role='combobox']:hover) {
     [part~='filled'] {
         [part~='input'] {
             color: var-get($theme, 'filled-text-hover-color');