diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
index f6465c846bc..30367cf8077 100644
--- a/core/src/components/input/input.md.outline.scss
+++ b/core/src/components/input/input.md.outline.scss
@@ -20,7 +20,7 @@
  * If the input has a validity state, the
  * border should reflect that as a color.
  */
-:host(.input-fill-outline.ion-touched.ion-valid),
+:host(.has-focus.input-fill-outline.ion-valid),
 :host(.input-fill-outline.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index 0f85e2b9c10..29e51842a9c 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -47,7 +47,7 @@
  * If the input has a validity state, the
  * border and label should reflect that as a color.
  */
-:host(.ion-touched.ion-valid),
+:host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
@@ -76,9 +76,9 @@
   color: var(--highlight-color);
 }
 
-:host(.input-label-placement-floating.ion-touched.ion-valid) .label-text-wrapper,
+:host(.has-focus.input-label-placement-floating.ion-valid) .label-text-wrapper,
 :host(.input-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
-:host(.input-label-placement-stacked.ion-touched.ion-valid) .label-text-wrapper,
+:host(.has-focus.input-label-placement-stacked.ion-valid) .label-text-wrapper,
 :host(.input-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper {
   color: var(--highlight-color);
 }
diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss
index 8bc0d3ae764..e48be79f2b8 100644
--- a/core/src/components/input/input.md.solid.scss
+++ b/core/src/components/input/input.md.solid.scss
@@ -25,7 +25,7 @@
  * If the input has a validity state, the
  * border should reflect that as a color.
  */
-:host(.input-fill-solid.ion-touched.ion-valid),
+:host(.has-focus.input-fill-solid.ion-valid),
 :host(.input-fill-solid.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 1700d78900b..42b882c572a 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -319,7 +319,17 @@
   --highlight-color: var(--highlight-color-invalid);
 }
 
-:host(.ion-touched.ion-valid) {
+/**
+ * The component highlight is only shown
+ * on focus, so we can safely set the valid
+ * color state when valid. If we
+ * set it when .has-focus is present then
+ * the highlight color would change
+ * from the valid color to the component's
+ * color during the transition after the
+ * component loses focus.
+ */
+:host(.ion-valid) {
   --highlight-color: var(--highlight-color-valid);
 }
 
@@ -346,8 +356,14 @@
 /**
  * If the input has a validity state, the
  * border and label should reflect that as a color.
+ * The invalid state should show if the input is
+ * invalid and has already been touched.
+ * The valid state should show if the input
+ * is valid, has already been touched, and
+ * is currently focused. Do not show the valid
+ * highlight when the input is blurred.
  */
-:host(.ion-touched.ion-valid),
+:host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
@@ -372,11 +388,11 @@
   color: #{$background-color-step-550};
 }
 
-:host(.ion-invalid) .input-bottom .error-text {
+:host(.ion-touched.ion-invalid) .input-bottom .error-text {
   display: block;
 }
 
-:host(.ion-invalid) .input-bottom .helper-text {
+:host(.ion-touched.ion-invalid) .input-bottom .helper-text {
   display: none;
 }
 
@@ -398,17 +414,6 @@
   padding-inline-start: 16px;
 }
 
-// Input Highlight
-// ----------------------------------------------------------------
-
-:host(.ion-touched.ion-invalid) {
-  --highlight-color: var(--highlight-color-invalid);
-}
-
-:host(.ion-touched.ion-valid) {
-  --highlight-color: var(--highlight-color-valid);
-}
-
 // Input Native
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/input/test/bottom-content/index.html b/core/src/components/input/test/bottom-content/index.html
index ad4a27a3fda..d08d111c0eb 100644
--- a/core/src/components/input/test/bottom-content/index.html
+++ b/core/src/components/input/test/bottom-content/index.html
@@ -62,13 +62,17 @@ <h2>Helper Hint</h2>
 
           <div class="grid-item">
             <h2>Error Hint</h2>
-            <ion-input class="ion-invalid" label="Email" error-text="Please enter a valid email"></ion-input>
+            <ion-input
+              class="ion-touched ion-invalid"
+              label="Email"
+              error-text="Please enter a valid email"
+            ></ion-input>
           </div>
 
           <div class="grid-item">
             <h2>Custom Error Color</h2>
             <ion-input
-              class="ion-invalid custom-error-color"
+              class="ion-touched ion-invalid custom-error-color"
               label="Email"
               error-text="Please enter a valid email"
             ></ion-input>
@@ -92,7 +96,7 @@ <h2>Counter with Helper</h2>
           <div class="grid-item">
             <h2>Counter with Error</h2>
             <ion-input
-              class="ion-invalid"
+              class="ion-touched ion-invalid"
               label="Email"
               counter="true"
               maxlength="100"
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts b/core/src/components/input/test/bottom-content/input.e2e.ts
index a52ea8263bb..e555cfc62a1 100644
--- a/core/src/components/input/test/bottom-content/input.e2e.ts
+++ b/core/src/components/input/test/bottom-content/input.e2e.ts
@@ -52,7 +52,7 @@ test.describe('input: hint text', () => {
     });
     test('error text should be visible when input is invalid', async ({ page }) => {
       await page.setContent(
-        `<ion-input class="ion-invalid" helper-text="my helper" error-text="my error" label="my input"></ion-input>`
+        `<ion-input class="ion-invalid ion-touched" helper-text="my helper" error-text="my error" label="my input"></ion-input>`
       );
 
       const helperText = page.locator('ion-input .helper-text');
@@ -68,7 +68,7 @@ test.describe('input: hint text', () => {
             --highlight-color-invalid: purple;
           }
         </style>
-        <ion-input class="ion-invalid custom-input" label="my label" error-text="my error"></ion-input>
+        <ion-input class="ion-invalid ion-touched custom-input" label="my label" error-text="my error"></ion-input>
       `);
 
       const errorText = page.locator('ion-input .error-text');
@@ -88,7 +88,9 @@ test.describe('input: hint text', () => {
         );
       });
       test('should not have visual regressions when rendering error text', async ({ page }) => {
-        await page.setContent(`<ion-input class="ion-invalid" error-text="my helper" label="my input"></ion-input>`);
+        await page.setContent(
+          `<ion-input class="ion-invalid ion-touched" error-text="my helper" label="my input"></ion-input>`
+        );
 
         const bottomEl = page.locator('ion-input .input-bottom');
         expect(await bottomEl.screenshot()).toMatchSnapshot(
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png
index 4bc8da4088d..c43970d6fc4 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png
index af6b3beac15..691ddfec274 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Safari-linux.png
index ccea5857f0f..0ba62f2a415 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png
index 9856c52d848..33aa2496e25 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png
index f7bd3b0adee..e8f6888177f 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Safari-linux.png
index 79b2b9c9747..c50e5898b02 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Chrome-linux.png
index ac39a66167e..474af920500 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Firefox-linux.png
index e6fbfdfa171..2ffe0d78ee9 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Safari-linux.png
index c683cd43919..5a0870cec5f 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Chrome-linux.png
index 297268ab40b..ff3f1bfbacb 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Firefox-linux.png
index 4de3989fb5d..b46679794ed 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Safari-linux.png
index 7d98f74f7fc..b2b4e054935 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/index.html b/core/src/components/input/test/highlight/index.html
index 29172a5af6e..b69c4d57439 100644
--- a/core/src/components/input/test/highlight/index.html
+++ b/core/src/components/input/test/highlight/index.html
@@ -62,10 +62,10 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-input
               label-placement="start"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -105,10 +105,10 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-input
               label-placement="floating"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -148,10 +148,10 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-input
               label-placement="stacked"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -192,11 +192,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-input
               fill="solid"
               label-placement="start"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -238,11 +238,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-input
               fill="solid"
               label-placement="floating"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -284,11 +284,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-input
               fill="solid"
               label-placement="stacked"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -330,11 +330,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-input
               fill="outline"
               label-placement="start"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -376,11 +376,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-input
               fill="outline"
               label-placement="floating"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -422,11 +422,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-input
               fill="outline"
               label-placement="stacked"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
diff --git a/core/src/components/input/test/highlight/input.e2e.ts b/core/src/components/input/test/highlight/input.e2e.ts
index 51ef5ae634d..1fc48985960 100644
--- a/core/src/components/input/test/highlight/input.e2e.ts
+++ b/core/src/components/input/test/highlight/input.e2e.ts
@@ -10,7 +10,7 @@ test.describe('input: highlights', () => {
       await page.setContent(`
         <ion-input
           value="hi@ionic.io"
-          class="ion-touched ion-valid"
+          class="ion-valid has-focus"
           label="Email"
           error-text="Please enter a valid email"
           helper-text="Enter an email"
@@ -61,7 +61,7 @@ test.describe('input: highlights', () => {
         <ion-input
           fill="solid"
           value="hi@ionic.io"
-          class="ion-touched ion-valid"
+          class="ion-valid has-focus"
           label="Email"
           error-text="Please enter a valid email"
           helper-text="Enter an email"
@@ -114,7 +114,7 @@ test.describe('input: highlights', () => {
         <ion-input
           fill="outline"
           value="hi@ionic.io"
-          class="ion-touched ion-valid"
+          class="ion-valid has-focus"
           label="Email"
           error-text="Please enter a valid email"
           helper-text="Enter an email"
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Chrome-linux.png
index c3750694dc1..214ab5178df 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Firefox-linux.png
index 19b5af5ef23..691357f1b41 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Safari-linux.png
index 11c792a5bbd..80175f875f2 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-focus-md-ltr-Mobile-Safari-linux.png
index a49472addb9..a10fc8152a3 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-focus-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Chrome-linux.png
index 1171b8c7951..b327b611223 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Firefox-linux.png
index 7485f274c3f..417785b1443 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Safari-linux.png
index f8f678ee1d3..e37eaa57875 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Chrome-linux.png
index c3dfe996da6..f6d8579d6aa 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Firefox-linux.png
index de045ef585b..07a7ac3d088 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Safari-linux.png
index b2bd98952a3..378f721a50a 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-valid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss
index 4664152ca0f..9e7f5dcc135 100644
--- a/core/src/components/select/select.md.outline.scss
+++ b/core/src/components/select/select.md.outline.scss
@@ -20,7 +20,7 @@
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
-:host(.select-fill-outline.ion-touched.ion-valid),
+:host(.has-focus.select-fill-outline.ion-valid),
 :host(.select-fill-outline.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index a6eae998873..9890ade8c80 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -45,9 +45,9 @@
   color: var(--highlight-color);
 }
 
-:host(.select-label-placement-floating.ion-touched.ion-valid) .label-text-wrapper,
+:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,
 :host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
-:host(.select-label-placement-stacked.ion-touched.ion-valid) .label-text-wrapper,
+:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,
 :host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper {
   color: var(--highlight-color);
 }
@@ -103,7 +103,7 @@
  * color if there is a validation state.
  */
 :host(.select-expanded) .select-wrapper .select-icon,
-:host(.ion-touched.ion-valid) .select-wrapper .select-icon,
+:host(.has-focus.ion-valid) .select-wrapper .select-icon,
 :host(.ion-touched.ion-invalid) .select-wrapper .select-icon,
 :host(.ion-focused) .select-wrapper .select-icon {
   color: var(--highlight-color);
diff --git a/core/src/components/select/select.md.solid.scss b/core/src/components/select/select.md.solid.scss
index 5ec38491a24..f7cd8f98efd 100644
--- a/core/src/components/select/select.md.solid.scss
+++ b/core/src/components/select/select.md.solid.scss
@@ -25,7 +25,7 @@
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
-:host(.select-fill-solid.ion-touched.ion-valid),
+:host(.has-focus.select-fill-solid.ion-valid),
 :host(.select-fill-solid.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index f6086698a8c..7c9b8aa1cb7 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -226,7 +226,17 @@ button {
   --highlight-color: var(--highlight-color-invalid);
 }
 
-:host(.ion-touched.ion-valid) {
+/**
+ * The component highlight is only shown
+ * on focus, so we can safely set the valid
+ * color state when touched/valid. If we
+ * set it when .has-focus is present then
+ * the highlight color would change
+ * from the valid color to the component's
+ * color during the transition after the
+ * component loses focus.
+ */
+:host(.ion-valid) {
   --highlight-color: var(--highlight-color-valid);
 }
 
diff --git a/core/src/components/select/test/highlight/index.html b/core/src/components/select/test/highlight/index.html
index 5561dac92db..aa6c8e8a7aa 100644
--- a/core/src/components/select/test/highlight/index.html
+++ b/core/src/components/select/test/highlight/index.html
@@ -49,14 +49,14 @@ <h1>No Fill, Default</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select label-placement="start" value="hi@ionic.io" class="has-focus" label="Fruit">
+            <ion-select label-placement="start" value="hi@ionic.io" class="ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
-            <ion-select label-placement="start" class="ion-touched ion-valid" label="Fruit">
+            <h2>Valid, Focus</h2>
+            <ion-select label-placement="start" class="ion-valid ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -73,14 +73,14 @@ <h1>No Fill, Floating</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select label-placement="floating" value="hi@ionic.io" class="has-focus" label="Fruit">
+            <ion-select label-placement="floating" value="hi@ionic.io" class="ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
-            <ion-select label-placement="floating" class="ion-touched ion-valid" label="Fruit">
+            <h2>Valid, Focus</h2>
+            <ion-select label-placement="floating" class="ion-valid ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -97,14 +97,14 @@ <h1>No Fill, Stacked</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select label-placement="stacked" value="hi@ionic.io" class="has-focus" label="Fruit">
+            <ion-select label-placement="stacked" value="hi@ionic.io" class="ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
-            <ion-select label-placement="stacked" class="ion-touched ion-valid" label="Fruit">
+            <h2>Valid, Focus</h2>
+            <ion-select label-placement="stacked" class="ion-valid ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -121,14 +121,14 @@ <h1>Solid, Default</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="solid" label-placement="start" value="hi@ionic.io" class="has-focus" label="Fruit">
+            <ion-select fill="solid" label-placement="start" value="hi@ionic.io" class="ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
-            <ion-select fill="solid" label-placement="start" class="ion-touched ion-valid" label="Fruit">
+            <h2>Valid, Focus</h2>
+            <ion-select fill="solid" label-placement="start" class="ion-valid ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -145,14 +145,14 @@ <h1>Solid, Floating</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="solid" label-placement="floating" value="hi@ionic.io" class="has-focus" label="Fruit">
+            <ion-select fill="solid" label-placement="floating" value="hi@ionic.io" class="ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
-            <ion-select fill="solid" label-placement="floating" class="ion-touched ion-valid" label="Fruit">
+            <h2>Valid, Focus</h2>
+            <ion-select fill="solid" label-placement="floating" class="ion-valid ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -169,14 +169,14 @@ <h1>Solid, Stacked</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="solid" label-placement="stacked" value="hi@ionic.io" class="has-focus" label="Fruit">
+            <ion-select fill="solid" label-placement="stacked" value="hi@ionic.io" class="ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
-            <ion-select fill="solid" label-placement="stacked" class="ion-touched ion-valid" label="Fruit">
+            <h2>Valid, Focus</h2>
+            <ion-select fill="solid" label-placement="stacked" class="ion-valid ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -193,14 +193,14 @@ <h1>Outline, Default</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="outline" label-placement="start" value="hi@ionic.io" class="has-focus" label="Fruit">
+            <ion-select fill="outline" label-placement="start" value="hi@ionic.io" class="ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
-            <ion-select fill="outline" label-placement="start" class="ion-touched ion-valid" label="Fruit">
+            <h2>Valid, Focus</h2>
+            <ion-select fill="outline" label-placement="start" class="ion-valid ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -217,14 +217,14 @@ <h1>Outline, Floating</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="outline" label-placement="floating" value="hi@ionic.io" class="has-focus" label="Fruit">
+            <ion-select fill="outline" label-placement="floating" value="hi@ionic.io" class="ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
-            <ion-select fill="outline" label-placement="floating" class="ion-touched ion-valid" label="Fruit">
+            <h2>Valid, Focus</h2>
+            <ion-select fill="outline" label-placement="floating" class="ion-valid ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -241,14 +241,14 @@ <h1>Outline, Stacked</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="outline" label-placement="stacked" value="hi@ionic.io" class="has-focus" label="Fruit">
+            <ion-select fill="outline" label-placement="stacked" value="hi@ionic.io" class="ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
-            <ion-select fill="outline" label-placement="stacked" class="ion-touched ion-valid" label="Fruit">
+            <h2>Valid, Focus</h2>
+            <ion-select fill="outline" label-placement="stacked" class="ion-valid ion-focused" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
diff --git a/core/src/components/select/test/highlight/select.e2e.ts b/core/src/components/select/test/highlight/select.e2e.ts
index e6c375e2bf1..b7ba5a41948 100644
--- a/core/src/components/select/test/highlight/select.e2e.ts
+++ b/core/src/components/select/test/highlight/select.e2e.ts
@@ -6,7 +6,112 @@ test.describe('input: highlights', () => {
     skip.rtl();
     skip.mode('ios');
   });
+
   test.describe('input: no fill', () => {
+    test('should render valid state correctly', async ({ page }) => {
+      await page.setContent(`
+        <ion-select value="apple" class="ion-valid ion-focused" label="Favorite Fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `);
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(`select-no-fill-valid-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render invalid state correctly', async ({ page }) => {
+      await page.setContent(`
+        <ion-select value="apple" class="ion-touched ion-invalid" label="Favorite Fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `);
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(`select-no-fill-invalid-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render focused state correctly', async ({ page }) => {
+      await page.setContent(`
+        <ion-select value="apple" class="ion-focused" label="Favorite Fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `);
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(`select-no-fill-focus-${page.getSnapshotSettings()}.png`);
+    });
+  });
+  test.describe('input: solid', () => {
+    test('should render valid state correctly', async ({ page }) => {
+      await page.setContent(`
+        <ion-select fill="solid" value="apple" class="ion-valid ion-focused" label="Favorite Fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `);
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(`select-solid-valid-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render invalid state correctly', async ({ page }) => {
+      await page.setContent(`
+        <ion-select fill="solid" value="apple" class="ion-touched ion-invalid" label="Favorite Fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `);
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(`select-solid-invalid-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render focused state correctly', async ({ page }) => {
+      await page.setContent(`
+        <ion-select fill="solid" value="apple" class="ion-focused" label="Favorite Fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `);
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(`select-solid-focus-${page.getSnapshotSettings()}.png`);
+    });
+  });
+  test.describe('input: outline', () => {
+    test('should render valid state correctly', async ({ page }) => {
+      await page.setContent(`
+        <ion-select fill="outline" value="apple" class="ion-valid ion-focused" label="Favorite Fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `);
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(`select-outline-valid-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render invalid state correctly', async ({ page }) => {
+      await page.setContent(`
+        <ion-select fill="outline" value="apple" class="ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `);
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(`select-outline-invalid-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render focused state correctly', async ({ page }) => {
+      await page.setContent(`
+        <ion-select fill="outline" value="apple" class="ion-focused" label="Favorite Fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `);
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(`select-outline-focus-${page.getSnapshotSettings()}.png`);
+    });
+  });
+});
+
+test.describe('select: expanded highlight', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+
+  test.describe('select: no fill', () => {
     test('should render bottom highlight', async ({ page }) => {
       await page.setContent(`
         <ion-select label="Label" class="select-expanded"></ion-select>
@@ -18,7 +123,7 @@ test.describe('input: highlights', () => {
       );
     });
   });
-  test.describe('input: solid', () => {
+  test.describe('select: solid', () => {
     test('should render bottom highlight', async ({ page }) => {
       await page.setContent(`
         <ion-select fill="solid" label="Label" class="select-expanded"></ion-select>
@@ -30,7 +135,7 @@ test.describe('input: highlights', () => {
       );
     });
   });
-  test.describe('input: outline', () => {
+  test.describe('select: outline', () => {
     test('should render bottom highlight', async ({ page }) => {
       await page.setContent(`
         <ion-select fill="outline" label="Label" class="select-expanded"></ion-select>
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ac2a11d0499
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2b08c87a9da
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..82e52e1a5f0
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2c969e2c455
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..cda30fbb192
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ba9878d842e
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a52c4572da5
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fe9bbbf7def
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b74183587ab
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0370364dd9f
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c5ff91709df
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aabd9e5d4e4
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e2b5d288ef5
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4d13236e5b4
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..98583df7be2
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3f6464ebe27
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ae183193c93
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7646c63b557
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8121c92be89
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9a8d9d1bf36
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..19880feb857
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..53e121deee7
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e41bfe43986
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c78e2401218
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..70e3c1f7819
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..334f48308e9
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..18fed0b632f
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/index.html b/core/src/components/textarea/test/bottom-content/index.html
index eacfde54430..04de279bd2b 100644
--- a/core/src/components/textarea/test/bottom-content/index.html
+++ b/core/src/components/textarea/test/bottom-content/index.html
@@ -64,13 +64,17 @@ <h2>Helper Hint</h2>
 
           <div class="grid-item">
             <h2>Error Hint</h2>
-            <ion-textarea class="ion-invalid" label="Email" error-text="Please enter a valid email"></ion-textarea>
+            <ion-textarea
+              class="ion-touched ion-invalid"
+              label="Email"
+              error-text="Please enter a valid email"
+            ></ion-textarea>
           </div>
 
           <div class="grid-item">
             <h2>Custom Error Color</h2>
             <ion-textarea
-              class="ion-invalid custom-error-color"
+              class="ion-touched ion-invalid custom-error-color"
               label="Email"
               error-text="Please enter a valid email"
             ></ion-textarea>
@@ -94,7 +98,7 @@ <h2>Counter with Helper</h2>
           <div class="grid-item">
             <h2>Counter with Error</h2>
             <ion-textarea
-              class="ion-invalid"
+              class="ion-touched ion-invalid"
               label="Email"
               counter="true"
               maxlength="100"
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts
index 6788d893182..3cfd234eeb4 100644
--- a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts
+++ b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts
@@ -33,7 +33,7 @@ test.describe('textarea: hint text', () => {
     });
     test('error text should be visible when textarea is invalid', async ({ page }) => {
       await page.setContent(
-        `<ion-textarea class="ion-invalid" helper-text="my helper" error-text="my error" label="my textarea"></ion-textarea>`
+        `<ion-textarea class="ion-invalid ion-touched" helper-text="my helper" error-text="my error" label="my textarea"></ion-textarea>`
       );
 
       const helperText = page.locator('ion-textarea .helper-text');
@@ -49,7 +49,7 @@ test.describe('textarea: hint text', () => {
             --highlight-color-invalid: purple;
           }
         </style>
-        <ion-textarea class="ion-invalid custom-textarea" label="my label" error-text="my error"></ion-textarea>
+        <ion-textarea class="ion-invalid ion-touched custom-textarea" label="my label" error-text="my error"></ion-textarea>
       `);
 
       const errorText = page.locator('ion-textarea .error-text');
@@ -70,7 +70,7 @@ test.describe('textarea: hint text', () => {
       });
       test('should not have visual regressions when rendering error text', async ({ page }) => {
         await page.setContent(
-          `<ion-textarea class="ion-invalid" error-text="my helper" label="my textarea"></ion-textarea>`
+          `<ion-textarea class="ion-invalid ion-touched" error-text="my helper" label="my textarea"></ion-textarea>`
         );
 
         const bottomEl = page.locator('ion-textarea .textarea-bottom');
@@ -150,7 +150,7 @@ test.describe('textarea: counter', () => {
 
       test('should not have visual regressions when rendering counter with error text', async ({ page }) => {
         await page.setContent(
-          `<ion-textarea class="ion-invalid" label="my textarea" counter="true" maxlength="20" error-text="my error"></ion-textarea>`
+          `<ion-textarea class="ion-invalid ion-touched" label="my textarea" counter="true" maxlength="20" error-text="my error"></ion-textarea>`
         );
 
         const bottomEl = page.locator('ion-textarea .textarea-bottom');
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Chrome-linux.png
index 3d6f69e2f69..dbbbbe0384e 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Firefox-linux.png
index 4b7c1e1f246..ff68d99208b 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Safari-linux.png
index 2d548663de2..5f7379c8314 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Chrome-linux.png
index 84d728c497f..a17b75e8312 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Firefox-linux.png
index ddc86bb1ab7..e7c6e7fbd55 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Safari-linux.png
index d1f109c928a..15c6d71fcb7 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Chrome-linux.png
index c76fb065021..08ccc97741a 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Firefox-linux.png
index 0b8382d7ce6..0e550489c8d 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Safari-linux.png
index f5ec3312a26..acbbe97735a 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Chrome-linux.png
index 3ef3de6f993..cc3d2e2e315 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Firefox-linux.png
index 358082f8eae..de9efa3c65a 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Safari-linux.png
index 31a5780ed9a..e8fc38aa041 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-counter-error-text-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png
index d9aaa92ab80..c43970d6fc4 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png
index af6b3beac15..691ddfec274 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Safari-linux.png
index ccea5857f0f..0ba62f2a415 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png
index 8866d81e99e..33aa2496e25 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png
index f7bd3b0adee..e8f6888177f 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Safari-linux.png
index 79b2b9c9747..c50e5898b02 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Chrome-linux.png
index ce8d2468e8a..474af920500 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Firefox-linux.png
index e6fbfdfa171..2ffe0d78ee9 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Safari-linux.png
index c683cd43919..5a0870cec5f 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Chrome-linux.png
index cf69a9fcd9a..ff3f1bfbacb 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Firefox-linux.png
index 4de3989fb5d..b46679794ed 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Safari-linux.png
index 7d98f74f7fc..b2b4e054935 100644
Binary files a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts-snapshots/textarea-bottom-content-error-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/index.html b/core/src/components/textarea/test/highlight/index.html
index 4b11fb145b4..a8d5cb48b95 100644
--- a/core/src/components/textarea/test/highlight/index.html
+++ b/core/src/components/textarea/test/highlight/index.html
@@ -62,10 +62,10 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-textarea
               label-placement="start"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -105,10 +105,10 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-textarea
               label-placement="floating"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -148,10 +148,10 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-textarea
               label-placement="stacked"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -192,11 +192,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-textarea
               fill="solid"
               label-placement="start"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -238,11 +238,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-textarea
               fill="solid"
               label-placement="floating"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -284,11 +284,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-textarea
               fill="solid"
               label-placement="stacked"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -330,11 +330,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-textarea
               fill="outline"
               label-placement="start"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -376,11 +376,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-textarea
               fill="outline"
               label-placement="floating"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
@@ -422,11 +422,11 @@ <h2>Focus</h2>
           </div>
 
           <div class="grid-item">
-            <h2>Valid</h2>
+            <h2>Valid, Focus</h2>
             <ion-textarea
               fill="outline"
               label-placement="stacked"
-              class="ion-touched ion-valid"
+              class="ion-valid has-focus"
               label="Email"
               error-text="Please enter a valid email"
               helper-text="Enter an email"
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts b/core/src/components/textarea/test/highlight/textarea.e2e.ts
index cce73c327b8..198ee583247 100644
--- a/core/src/components/textarea/test/highlight/textarea.e2e.ts
+++ b/core/src/components/textarea/test/highlight/textarea.e2e.ts
@@ -10,7 +10,7 @@ test.describe('textarea: highlights', () => {
       await page.setContent(`
         <ion-textarea
           value="hi@ionic.io"
-          class="ion-touched ion-valid"
+          class="ion-valid has-focus"
           label="Email"
           error-text="Please enter a valid email"
           helper-text="Enter an email"
@@ -61,7 +61,7 @@ test.describe('textarea: highlights', () => {
         <ion-textarea
           fill="solid"
           value="hi@ionic.io"
-          class="ion-touched ion-valid"
+          class="ion-valid has-focus"
           label="Email"
           error-text="Please enter a valid email"
           helper-text="Enter an email"
@@ -114,7 +114,7 @@ test.describe('textarea: highlights', () => {
         <ion-textarea
           fill="outline"
           value="hi@ionic.io"
-          class="ion-touched ion-valid"
+          class="ion-valid has-focus"
           label="Email"
           error-text="Please enter a valid email"
           helper-text="Enter an email"
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Chrome-linux.png
index 132c319e48d..5bb93dcc12e 100644
Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Firefox-linux.png
index 5c5440d0768..32ae667ce92 100644
Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Safari-linux.png
index 7ba675f2095..707d9ebb2c4 100644
Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Chrome-linux.png
index 68823f19e66..7a371eec366 100644
Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Firefox-linux.png
index 250f6ab52f7..3a089211620 100644
Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Safari-linux.png
index 924fdcd0d47..ba9282d5f6d 100644
Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Chrome-linux.png
index 23c7a245df1..3a7f3123bfa 100644
Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Firefox-linux.png
index 4cde9e34071..013ece31413 100644
Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Safari-linux.png
index 1efee5cfc5f..8cb23ee0651 100644
Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.md.outline.scss b/core/src/components/textarea/textarea.md.outline.scss
index 2220aacba6e..0493cbc5bf1 100644
--- a/core/src/components/textarea/textarea.md.outline.scss
+++ b/core/src/components/textarea/textarea.md.outline.scss
@@ -20,7 +20,7 @@
  * If the textarea has a validity state, the
  * border should reflect that as a color.
  */
-:host(.textarea-fill-outline.ion-touched.ion-valid),
+:host(.has-focus.textarea-fill-outline.ion-valid),
 :host(.textarea-fill-outline.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
index 993a556a1b8..57b9b091fc3 100644
--- a/core/src/components/textarea/textarea.md.scss
+++ b/core/src/components/textarea/textarea.md.scss
@@ -73,9 +73,9 @@
   color: var(--highlight-color);
 }
 
-:host(.textarea-label-placement-floating.ion-touched.ion-valid) .label-text-wrapper,
+:host(.has-focus.textarea-label-placement-floating.ion-valid) .label-text-wrapper,
 :host(.textarea-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
-:host(.textarea-label-placement-stacked.ion-touched.ion-valid) .label-text-wrapper,
+:host(.has-focus.textarea-label-placement-stacked.ion-valid) .label-text-wrapper,
 :host(.textarea-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper {
   color: var(--highlight-color);
 }
diff --git a/core/src/components/textarea/textarea.md.solid.scss b/core/src/components/textarea/textarea.md.solid.scss
index 046cdc233eb..6c1908652aa 100644
--- a/core/src/components/textarea/textarea.md.solid.scss
+++ b/core/src/components/textarea/textarea.md.solid.scss
@@ -25,7 +25,7 @@
  * If the textarea has a validity state, the
  * border should reflect that as a color.
  */
-:host(.textarea-fill-solid.ion-touched.ion-valid),
+:host(.has-focus.textarea-fill-solid.ion-valid),
 :host(.textarea-fill-solid.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index fd3c0ad9cb6..a20dc3d0460 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -286,17 +286,6 @@
   @include padding(var(--padding-top), 0px, var(--padding-bottom), 0px);
 }
 
-// Textarea Highlight
-// ----------------------------------------------------------------
-
-:host(.ion-touched.ion-invalid) {
-  --highlight-color: var(--highlight-color-invalid);
-}
-
-:host(.ion-touched.ion-valid) {
-  --highlight-color: var(--highlight-color-valid);
-}
-
 .native-wrapper,
 // TODO: FW-2876 - Remove this selector, keep .native-wrapper
 .textarea-legacy-wrapper {
@@ -338,7 +327,17 @@
   --highlight-color: var(--highlight-color-invalid);
 }
 
-:host(.ion-touched.ion-valid) {
+/**
+ * The component highlight is only shown
+ * on focus, so we can safely set the valid
+ * color state when touched/valid. If we
+ * set it when .has-focus is present then
+ * the highlight color would change
+ * from the valid color to the component's
+ * color during the transition after the
+ * component loses focus.
+ */
+:host(.ion-valid) {
   --highlight-color: var(--highlight-color-valid);
 }
 
@@ -366,7 +365,7 @@
  * If the textarea has a validity state, the
  * border and label should reflect that as a color.
  */
-:host(.ion-touched.ion-valid),
+:host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
@@ -391,11 +390,11 @@
   color: #{$background-color-step-550};
 }
 
-:host(.ion-invalid) .textarea-bottom .error-text {
+:host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
   display: block;
 }
 
-:host(.ion-invalid) .textarea-bottom .helper-text {
+:host(.ion-touched.ion-invalid) .textarea-bottom .helper-text {
   display: none;
 }