diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss
index 616cb883fe..609b285252 100644
--- a/core/src/components/input/input.ionic.outline.scss
+++ b/core/src/components/input/input.ionic.outline.scss
@@ -8,8 +8,6 @@
   --border-radius: #{$ionic-border-radius-rounded-small};
   --padding-start: 12px;
   --padding-end: 12px;
-  --placeholder-color: #{$ionic-color-neutral-600};
-  --placeholder-opacity: 1;
 }
 
 :host(.input-fill-outline.input-size-large.input-shape-round) {
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 3fd34df09b..2c031328fa 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -11,6 +11,8 @@
   --border-color: #{$ionic-color-neutral-300};
   --highlight-color-valid: #{$ionic-color-success-400};
   --highlight-color-invalid: #{$ionic-color-error-400};
+  --placeholder-color: #{$ionic-color-neutral-500};
+  --placeholder-opacity: 1;
   --text-color-invalid: #{$ionic-color-error-600};
 }
 
@@ -91,6 +93,11 @@
   color: var(--text-color-invalid);
 }
 
+:host(.has-focus.ion-valid),
+:host(.ion-touched.ion-invalid) {
+  --border-width: #{tokens.$ionic-border-size-small};
+}
+
 // Input Hover
 // ----------------------------------------------------------------
 
@@ -137,3 +144,11 @@
 :host(.input-disabled.ion-color) .helper-text {
   opacity: 0.6;
 }
+
+// Input Focus
+// ----------------------------------------------------------------
+
+:host(.has-focus) {
+  --border-color: #{tokens.$ionic-color-primary};
+  --border-width: #{tokens.$ionic-border-size-medium};
+}
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4115b5a888..2f3730d56d 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 39361209f4..0d3f7a85d8 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png
index 37791ec878..fc5c49f31e 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 071f1385e0..75310280ff 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 172f657730..a0f7fd9f8d 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Safari-linux.png
index a990544f33..09af498195 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index bad8121f2a..0593b628b2 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index df5ebff0fc..418fefe646 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7fee4d8086..e1b706be99 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 54e0c4219f..59a1195d12 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Firefox-linux.png
index a3cd4c3dab..e0497e8b83 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Safari-linux.png
index 1ff933c171..311871085d 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1f320d9fa3..2056afffb5 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 85853de98a..6317c92d64 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0963c0e39b..9f001014f0 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 925cc43ed8..fca0392d2f 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Firefox-linux.png
index ea1faa3654..c56084fdb3 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Safari-linux.png
index 45d9d4f19f..49dc378473 100644
Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-shape-round-size-large-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/index.html b/core/src/components/input/test/states/index.html
index 3dff3af45a..f535ca6c3f 100644
--- a/core/src/components/input/test/states/index.html
+++ b/core/src/components/input/test/states/index.html
@@ -19,7 +19,7 @@
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
-      h3 {
+      h2 {
         font-size: 12px;
         font-weight: normal;
 
@@ -46,19 +46,18 @@
 
       <ion-content id="content" class="ion-padding">
         <h1>Readonly</h1>
-        <h2>No Fill</h2>
         <div class="grid">
           <div class="grid-item">
-            <h3>Default</h3>
+            <h2>No Fill</h2>
 
             <ion-input label="Email" value="hi@ionic.io" readonly="true"></ion-input>
           </div>
         </div>
+
         <h1>Disabled</h1>
-        <h2>No Fill</h2>
         <div class="grid">
           <div class="grid-item">
-            <h3>Default</h3>
+            <h2>No Fill</h2>
 
             <ion-input
               label="Email"
@@ -71,7 +70,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Valid</h3>
+            <h2>No Fill, Valid</h2>
 
             <ion-input
               label="Email"
@@ -85,7 +84,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Invalid</h3>
+            <h2>No Fill, Invalid</h2>
 
             <ion-input
               label="Email"
@@ -99,7 +98,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Color (ionic theme only)</h3>
+            <h2>No Fill, Color (ionic theme only)</h2>
 
             <ion-input
               label="Email"
@@ -113,10 +112,9 @@
           </div>
         </div>
 
-        <h2>Outline</h2>
         <div class="grid">
           <div class="grid-item">
-            <h3>Default</h3>
+            <h2>Outline</h2>
 
             <ion-input
               fill="outline"
@@ -130,7 +128,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Valid</h3>
+            <h2>Outline, Valid</h2>
 
             <ion-input
               fill="outline"
@@ -145,7 +143,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Invalid</h3>
+            <h2>Outline, Invalid</h2>
 
             <ion-input
               fill="outline"
@@ -160,7 +158,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Color (ionic theme only)</h3>
+            <h2>Outline, Color (ionic theme only)</h2>
 
             <ion-input
               fill="outline"
@@ -174,6 +172,21 @@
             ></ion-input>
           </div>
         </div>
+
+        <h1>Focused</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Fill</h2>
+
+            <ion-input label="Email" value="hi@ionic.io" class="has-focus"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline</h2>
+
+            <ion-input fill="outline" label="Email" value="hi@ionic.io" class="has-focus"></ion-input>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/input/test/states/input.e2e.ts b/core/src/components/input/test/states/input.e2e.ts
index e0a7fa303f..3264641a0d 100644
--- a/core/src/components/input/test/states/input.e2e.ts
+++ b/core/src/components/input/test/states/input.e2e.ts
@@ -142,5 +142,38 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
         });
       });
     });
+
+    test.describe(title('focused'), () => {
+      test('should render focused input correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <div class="container">
+            <ion-input
+              label="Email" 
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              class="has-focus"
+            ></ion-input>
+
+            <ion-input
+              fill="outline"
+              label="Email" 
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              class="has-focus"
+            ></ion-input>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`input-focused`));
+      });
+    });
   });
 });
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0aee7a8cf2
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5009a84a7a
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..fe6623738c
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ