diff --git a/packages/input-container/test/visual/lumo/input-container.test.js b/packages/input-container/test/visual/lumo/input-container.test.js
index ad4e26d497..993eeae9bd 100644
--- a/packages/input-container/test/visual/lumo/input-container.test.js
+++ b/packages/input-container/test/visual/lumo/input-container.test.js
@@ -35,6 +35,12 @@ describe('input-container', () => {
     await visualDiff(div, 'invalid');
   });
 
+  it('readonly invalid', async () => {
+    element.readonly = true;
+    element.invalid = true;
+    await visualDiff(div, 'readonly-invalid');
+  });
+
   it('prefix icon', async () => {
     const icon = document.createElement('vaadin-icon');
     icon.setAttribute('slot', 'prefix');
diff --git a/packages/input-container/test/visual/lumo/screenshots/input-container/baseline/readonly-invalid.png b/packages/input-container/test/visual/lumo/screenshots/input-container/baseline/readonly-invalid.png
new file mode 100644
index 0000000000..99bc110fef
Binary files /dev/null and b/packages/input-container/test/visual/lumo/screenshots/input-container/baseline/readonly-invalid.png differ
diff --git a/packages/input-container/theme/lumo/vaadin-input-container-styles.js b/packages/input-container/theme/lumo/vaadin-input-container-styles.js
index bbf7e2e0b3..9a4c2e44d2 100644
--- a/packages/input-container/theme/lumo/vaadin-input-container-styles.js
+++ b/packages/input-container/theme/lumo/vaadin-input-container-styles.js
@@ -93,7 +93,7 @@ registerStyles(
       background: var(--_invalid-background);
     }
 
-    :host([invalid])::after {
+    :host([invalid]:not([readonly]))::after {
       background: var(--_invalid-hover-highlight);
     }