diff --git a/core/api.txt b/core/api.txt
index eab32d73ae..506dc9ba38 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -596,6 +596,7 @@ ion-input,css-prop,--color
 ion-input,css-prop,--highlight-color-focused
 ion-input,css-prop,--highlight-color-invalid
 ion-input,css-prop,--highlight-color-valid
+ion-input,css-prop,--highlight-height
 ion-input,css-prop,--padding-bottom
 ion-input,css-prop,--padding-end
 ion-input,css-prop,--padding-start
@@ -1291,6 +1292,7 @@ ion-select,css-prop,--border-width
 ion-select,css-prop,--highlight-color-focused
 ion-select,css-prop,--highlight-color-invalid
 ion-select,css-prop,--highlight-color-valid
+ion-select,css-prop,--highlight-height
 ion-select,css-prop,--padding-bottom
 ion-select,css-prop,--padding-end
 ion-select,css-prop,--padding-start
@@ -1424,6 +1426,7 @@ ion-textarea,css-prop,--color
 ion-textarea,css-prop,--highlight-color-focused
 ion-textarea,css-prop,--highlight-color-invalid
 ion-textarea,css-prop,--highlight-color-valid
+ion-textarea,css-prop,--highlight-height
 ion-textarea,css-prop,--padding-bottom
 ion-textarea,css-prop,--padding-end
 ion-textarea,css-prop,--padding-start
diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index 4f06328db0..d17929f701 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -4,6 +4,7 @@
 :host {
   --border-width: #{$hairlines-width};
   --border-color: #{$item-ios-border-color};
+  --highlight-height: 0px;
 
   font-size: $input-ios-font-size;
 }
diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
index ea202b74ab..be54121d0e 100644
--- a/core/src/components/input/input.md.outline.scss
+++ b/core/src/components/input/input.md.outline.scss
@@ -43,7 +43,7 @@
  * the input is focused.
  */
 :host(.input-fill-outline.has-focus) {
-  --border-width: 2px;
+  --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
 
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index f11e356259..f00e98db39 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -10,6 +10,7 @@
 :host {
   --border-width: 1px;
   --border-color: #{$item-md-border-color};
+  --highlight-height: 2px;
 
   font-size: $input-md-font-size;
 }
@@ -73,7 +74,7 @@
   position: absolute;
 
   width: 100%;
-  height: 2px;
+  height: var(--highlight-height);
 
   transform: scale(0);
 
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 06877434e1..b8a9cabf2d 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -19,6 +19,7 @@
    * @prop --placeholder-font-weight: Font weight of the input placeholder text
    * @prop --placeholder-opacity: Opacity of the input placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the input. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the input when focused
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
diff --git a/core/src/components/input/test/highlight/index.html b/core/src/components/input/test/highlight/index.html
index b69c4d5743..e5c72ec240 100644
--- a/core/src/components/input/test/highlight/index.html
+++ b/core/src/components/input/test/highlight/index.html
@@ -33,6 +33,13 @@
           padding: 0;
         }
       }
+
+      .custom {
+        --highlight-color-focused: purple;
+        --highlight-color-invalid: purple;
+        --highlight-color-valid: purple;
+        --highlight-height: 6px;
+      }
     </style>
   </head>
 
@@ -174,6 +181,49 @@
           </div>
         </div>
 
+        <h1>No Fill, Custom</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Focus</h2>
+            <ion-input
+              label-placement="start"
+              value="hi@ionic.io"
+              class="has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Valid, Focus</h2>
+            <ion-input
+              label-placement="start"
+              class="ion-valid has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Invalid</h2>
+            <ion-input
+              label-placement="start"
+              class="ion-touched ion-invalid custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+        </div>
+
         <h1>Solid, Default</h1>
         <div class="grid">
           <div class="grid-item">
@@ -312,6 +362,52 @@
           </div>
         </div>
 
+        <h1>Solid, Custom</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Focus</h2>
+            <ion-input
+              fill="solid"
+              label-placement="start"
+              value="hi@ionic.io"
+              class="has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Valid, Focus</h2>
+            <ion-input
+              fill="solid"
+              label-placement="start"
+              class="ion-valid has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Invalid</h2>
+            <ion-input
+              fill="solid"
+              label-placement="start"
+              class="ion-touched ion-invalid custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+        </div>
+
         <h1>Outline, Default</h1>
         <div class="grid">
           <div class="grid-item">
@@ -449,6 +545,52 @@
             ></ion-input>
           </div>
         </div>
+
+        <h1>Outline, Custom</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Focus</h2>
+            <ion-input
+              fill="outline"
+              label-placement="start"
+              value="hi@ionic.io"
+              class="has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Valid, Focus</h2>
+            <ion-input
+              fill="outline"
+              label-placement="start"
+              class="ion-valid has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Invalid</h2>
+            <ion-input
+              fill="outline"
+              label-placement="start"
+              class="ion-touched ion-invalid custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/input/test/highlight/input.e2e.ts b/core/src/components/input/test/highlight/input.e2e.ts
index b1e1280eb7..719fd811c9 100644
--- a/core/src/components/input/test/highlight/input.e2e.ts
+++ b/core/src/components/input/test/highlight/input.e2e.ts
@@ -61,6 +61,56 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         const input = page.locator('ion-input');
         await expect(input).toHaveScreenshot(screenshot(`input-no-fill-focus`));
       });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-input.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-input
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`input-no-fill-custom-highlight`));
+      });
     });
     test.describe('input: solid', () => {
       test('should render valid state correctly', async ({ page }) => {
@@ -123,6 +173,59 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         const input = page.locator('ion-input');
         await expect(input).toHaveScreenshot(screenshot(`input-solid-focus`));
       });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-input.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-input
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`input-solid-custom-highlight`));
+      });
     });
     test.describe('input: outline', () => {
       test('should render valid state correctly', async ({ page }) => {
@@ -185,6 +288,59 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         const input = page.locator('ion-input');
         await expect(input).toHaveScreenshot(screenshot(`input-outline-focus`));
       });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-input.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-input
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+
+            <ion-input
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-input>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`input-outline-custom-highlight`));
+      });
     });
   });
 });
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..96382aac45
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..80d92bf920
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a9819db19b
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2281a58a15
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..464976baf3
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b87b075539
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-custom-highlight-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..96382aac45
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..80d92bf920
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a9819db19b
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ca77c96d66
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..270f76c496
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6801f9de9f
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..96382aac45
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..80d92bf920
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a9819db19b
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..05c402a029
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5739c1ad52
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8509e92014
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-solid-custom-highlight-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
index 2e24dc9b83..a1d3f5df08 100644
--- a/core/src/components/select/select.ios.scss
+++ b/core/src/components/select/select.ios.scss
@@ -4,6 +4,10 @@
 // iOS Select
 // --------------------------------------------------
 
+:host {
+  --highlight-height: 0px;
+}
+
 .select-icon {
   width: $select-ios-icon-size;
   height: $select-ios-icon-size;
diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss
index 467f804106..e1f4d54395 100644
--- a/core/src/components/select/select.md.outline.scss
+++ b/core/src/components/select/select.md.outline.scss
@@ -44,7 +44,7 @@
  */
 :host(.select-fill-outline.select-expanded),
 :host(.select-fill-outline.ion-focused) {
-  --border-width: 2px;
+  --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
 
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index 50d46e0249..5d556e11f9 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -9,6 +9,7 @@
 :host {
   --border-width: 1px;
   --border-color: #{$item-md-border-color};
+  --highlight-height: 2px;
 }
 
 .select-icon {
@@ -50,7 +51,7 @@
   position: absolute;
 
   width: 100%;
-  height: 2px;
+  height: var(--highlight-height);
 
   transform: scale(0);
 
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index 877c2ab92c..63701acb64 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -14,6 +14,7 @@
    * @prop --placeholder-color: Color of the select placeholder text
    * @prop --placeholder-opacity: Opacity of the select placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the select. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the select when focused
    * @prop --highlight-color-invalid: The color of the highlight on the select when invalid
    * @prop --highlight-color-valid: The color of the highlight on the select when valid
diff --git a/core/src/components/select/test/highlight/index.html b/core/src/components/select/test/highlight/index.html
index aa6c8e8a7a..9d206b804f 100644
--- a/core/src/components/select/test/highlight/index.html
+++ b/core/src/components/select/test/highlight/index.html
@@ -33,6 +33,13 @@
           padding: 0;
         }
       }
+
+      .custom {
+        --highlight-color-focused: purple;
+        --highlight-color-invalid: purple;
+        --highlight-color-valid: purple;
+        --highlight-height: 6px;
+      }
     </style>
   </head>
 
@@ -117,6 +124,30 @@
           </div>
         </div>
 
+        <h1>No Fill, Custom</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Focus</h2>
+            <ion-select label-placement="start" value="hi@ionic.io" class="custom ion-focused" label="Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Valid, Focus</h2>
+            <ion-select label-placement="start" class="custom ion-valid ion-focused" label="Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Invalid</h2>
+            <ion-select label-placement="start" class="custom ion-touched ion-invalid" label="Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+
         <h1>Solid, Default</h1>
         <div class="grid">
           <div class="grid-item">
@@ -189,6 +220,36 @@
           </div>
         </div>
 
+        <h1>Solid, Custom</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Focus</h2>
+            <ion-select
+              fill="solid"
+              label-placement="start"
+              value="hi@ionic.io"
+              class="custom ion-focused"
+              label="Fruit"
+            >
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Valid, Focus</h2>
+            <ion-select fill="solid" label-placement="start" class="custom ion-valid ion-focused" label="Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Invalid</h2>
+            <ion-select fill="solid" label-placement="start" class="custom ion-touched ion-invalid" label="Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+
         <h1>Outline, Default</h1>
         <div class="grid">
           <div class="grid-item">
@@ -260,6 +321,36 @@
             </ion-select>
           </div>
         </div>
+
+        <h1>Outline, Custom</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Focus</h2>
+            <ion-select
+              fill="outline"
+              label-placement="start"
+              value="hi@ionic.io"
+              class="custom ion-focused"
+              label="Fruit"
+            >
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Valid, Focus</h2>
+            <ion-select fill="outline" label-placement="start" class="custom ion-valid ion-focused" label="Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Invalid</h2>
+            <ion-select fill="outline" label-placement="start" class="custom ion-touched ion-invalid" label="Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/select/test/highlight/select.e2e.ts b/core/src/components/select/test/highlight/select.e2e.ts
index 446562a436..23fd444c56 100644
--- a/core/src/components/select/test/highlight/select.e2e.ts
+++ b/core/src/components/select/test/highlight/select.e2e.ts
@@ -2,8 +2,8 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('input: highlights'), () => {
-    test.describe('input: no fill', () => {
+  test.describe(title('select: highlights'), () => {
+    test.describe('select: no fill', () => {
       test('should render valid state correctly', async ({ page }) => {
         await page.setContent(
           `
@@ -43,8 +43,40 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         const select = page.locator('ion-select');
         await expect(select).toHaveScreenshot(screenshot(`select-no-fill-focus`));
       });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-select.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-select value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select value="apple" class="custom ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select value="apple" class="custom ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`select-no-fill-custom-highlight`));
+      });
     });
-    test.describe('input: solid', () => {
+    test.describe('select: solid', () => {
       test('should render valid state correctly', async ({ page }) => {
         await page.setContent(
           `
@@ -84,8 +116,40 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         const select = page.locator('ion-select');
         await expect(select).toHaveScreenshot(screenshot(`select-solid-focus`));
       });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-select.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-select fill="solid" value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="solid" value="apple" class="custom ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="solid" value="apple" class="custom ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`select-solid-custom-highlight`));
+      });
     });
-    test.describe('input: outline', () => {
+    test.describe('select: outline', () => {
       test('should render valid state correctly', async ({ page }) => {
         await page.setContent(
           `
@@ -125,6 +189,38 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         const select = page.locator('ion-select');
         await expect(select).toHaveScreenshot(screenshot(`select-outline-focus`));
       });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-select.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-select fill="outline" value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="outline" value="apple" class="custom ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="outline" value="apple" class="custom ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`select-outline-custom-highlight`));
+      });
     });
   });
 
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-custom-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-custom-highlight-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3e27cca8ab
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-custom-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-custom-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-custom-highlight-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2b270335cb
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-custom-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-custom-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-custom-highlight-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3d83974cf9
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-custom-highlight-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..dac9ac793a
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..06ef546e17
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8cde96cb5a
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-custom-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-custom-highlight-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..083bd8b4e7
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-custom-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-custom-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-custom-highlight-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ccd7fdbe0c
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-custom-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-custom-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-custom-highlight-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a069032945
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-custom-highlight-md-ltr-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 a8d5cb48b9..c090fa92b1 100644
--- a/core/src/components/textarea/test/highlight/index.html
+++ b/core/src/components/textarea/test/highlight/index.html
@@ -33,6 +33,13 @@
           padding: 0;
         }
       }
+
+      .custom {
+        --highlight-color-focused: purple;
+        --highlight-color-invalid: purple;
+        --highlight-color-valid: purple;
+        --highlight-height: 6px;
+      }
     </style>
   </head>
 
@@ -174,6 +181,49 @@
           </div>
         </div>
 
+        <h1>No Fill, Custom</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Focus</h2>
+            <ion-textarea
+              label-placement="start"
+              value="hi@ionic.io"
+              class="has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Valid, Focus</h2>
+            <ion-textarea
+              label-placement="start"
+              class="ion-valid has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Invalid</h2>
+            <ion-textarea
+              label-placement="start"
+              class="ion-touched ion-invalid custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        </div>
+
         <h1>Solid, Default</h1>
         <div class="grid">
           <div class="grid-item">
@@ -312,6 +362,52 @@
           </div>
         </div>
 
+        <h1>Solid, Custom</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Focus</h2>
+            <ion-textarea
+              fill="solid"
+              label-placement="start"
+              value="hi@ionic.io"
+              class="has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Valid, Focus</h2>
+            <ion-textarea
+              fill="solid"
+              label-placement="start"
+              class="ion-valid has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Invalid</h2>
+            <ion-textarea
+              fill="solid"
+              label-placement="start"
+              class="ion-touched ion-invalid custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        </div>
+
         <h1>Outline, Default</h1>
         <div class="grid">
           <div class="grid-item">
@@ -449,6 +545,52 @@
             ></ion-textarea>
           </div>
         </div>
+
+        <h1>Outline, Custom</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Focus</h2>
+            <ion-textarea
+              fill="outline"
+              label-placement="start"
+              value="hi@ionic.io"
+              class="has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Valid, Focus</h2>
+            <ion-textarea
+              fill="outline"
+              label-placement="start"
+              class="ion-valid has-focus custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Invalid</h2>
+            <ion-textarea
+              fill="outline"
+              label-placement="start"
+              class="ion-touched ion-invalid custom"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts b/core/src/components/textarea/test/highlight/textarea.e2e.ts
index cd12c7181f..d85553b0f8 100644
--- a/core/src/components/textarea/test/highlight/textarea.e2e.ts
+++ b/core/src/components/textarea/test/highlight/textarea.e2e.ts
@@ -64,6 +64,56 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-focus`));
       });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-textarea.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-textarea
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`textarea-no-fill-custom-highlight`));
+      });
     });
     test.describe('textarea: solid', () => {
       test('should render valid state correctly', async ({ page }) => {
@@ -126,6 +176,59 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-focus`));
       });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-textarea.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-textarea
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`textarea-solid-custom-highlight`));
+      });
     });
     test.describe('textarea: outline', () => {
       test('should render valid state correctly', async ({ page }) => {
@@ -188,6 +291,59 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-focus`));
       });
+      test('should render custom highlight correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-textarea.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-textarea
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`textarea-outline-custom-highlight`));
+      });
     });
   });
 });
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0b7e4bf2a9
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e2006d3442
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f6461be418
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b72587567e
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6f6d804d82
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8d415e3057
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-custom-highlight-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0b7e4bf2a9
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e2006d3442
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f6461be418
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f2c8b1fac4
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a312c2d22c
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8b77f5d326
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-custom-highlight-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0b7e4bf2a9
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e2006d3442
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f6461be418
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..66732e5dfe
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3814f3eea9
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..82c3c7939b
Binary files /dev/null and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-custom-highlight-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss
index 9549217dbb..098a345a90 100644
--- a/core/src/components/textarea/textarea.ios.scss
+++ b/core/src/components/textarea/textarea.ios.scss
@@ -12,6 +12,7 @@
   --padding-end: 0px;
   --padding-bottom: #{$textarea-padding-bottom};
   --padding-start: 0px;
+  --highlight-height: 0px;
 
   font-size: $textarea-ios-font-size;
 }
diff --git a/core/src/components/textarea/textarea.md.outline.scss b/core/src/components/textarea/textarea.md.outline.scss
index 1e91bb02cb..5cb2c66f34 100644
--- a/core/src/components/textarea/textarea.md.outline.scss
+++ b/core/src/components/textarea/textarea.md.outline.scss
@@ -43,7 +43,7 @@
  * the textarea is focused.
  */
 :host(.textarea-fill-outline.has-focus) {
-  --border-width: 2px;
+  --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
 
diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
index c3403b6ebe..eec8efd025 100644
--- a/core/src/components/textarea/textarea.md.scss
+++ b/core/src/components/textarea/textarea.md.scss
@@ -14,6 +14,7 @@
   --padding-end: 0px;
   --padding-bottom: #{$textarea-padding-bottom};
   --padding-start: 0px;
+  --highlight-height: 2px;
 
   font-size: $textarea-md-font-size;
 }
@@ -62,7 +63,7 @@
   position: absolute;
 
   width: 100%;
-  height: 2px;
+  height: var(--highlight-height);
 
   transform: scale(0);
 
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index c312e1e74e..f8dcf82e42 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -20,6 +20,7 @@
    * @prop --placeholder-font-weight: Weight of the placeholder text
    * @prop --placeholder-opacity: Opacity of the placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the textarea. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the textarea when focused
    * @prop --highlight-color-valid: The color of the highlight on the textarea when valid
    * @prop --highlight-color-invalid: The color of the highlight on the textarea when invalid