diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 0e02b98461..565abbb0ce 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -651,6 +651,7 @@ export class Input implements ComponentInterface {
           [`input-shape-${shape}`]: shape !== undefined,
           [`input-label-placement-${labelPlacement}`]: true,
           'in-item': hostContext('ion-item', this.el),
+          'in-item-color': hostContext('ion-item.ion-color', this.el),
         })}
       >
         <label class="input-wrapper">
diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts
index 3d045af547..66c6256104 100644
--- a/core/src/components/input/test/basic/input.e2e.ts
+++ b/core/src/components/input/test/basic/input.e2e.ts
@@ -100,7 +100,7 @@ test.describe('input: clear button', () => {
   test('should inherit color when used in item with color property', async ({ page }) => {
     await page.setContent(`
       <ion-item color="primary">
-        <ion-input value="Text" clear-input="true"></ion-input>
+        <ion-input aria-label="my label" value="Text" clear-input="true"></ion-input>
       </ion-item>
     `);