diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index c70b2bb400..42bee8e005 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -50,11 +50,20 @@ export class Input implements ComponentInterface {
    * Resets when the input loses focus.
    */
   private didInputClearOnEdit = false;
+
   /**
    * The value of the input when the input is focused.
    */
   private focusedValue?: string | number | null;
 
+  /**
+   * The `hasFocus` state ensures the focus class is
+   * added regardless of how the element is focused.
+   * The `ion-focused` class only applies when focused
+   * via tabbing, not by clicking.
+   * The `has-focus` logic was added to ensure the class
+   * is applied in both cases.
+   */
   @State() hasFocus = false;
 
   @Element() el!: HTMLIonInputElement;
diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss
index e1f4d54395..ca801e265b 100644
--- a/core/src/components/select/select.md.outline.scss
+++ b/core/src/components/select/select.md.outline.scss
@@ -43,7 +43,7 @@
  * the select is focused.
  */
 :host(.select-fill-outline.select-expanded),
-:host(.select-fill-outline.ion-focused) {
+:host(.select-fill-outline.has-focus) {
   --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
@@ -240,3 +240,18 @@
 :host(.label-floating.select-fill-outline) .select-outline-notch {
   border-top: none;
 }
+
+// Select Icon
+// ----------------------------------------------------------------
+
+/**
+ * When the select has an outline fill and
+ * in an item, then the icon should
+ * take on the highlight color.
+ */
+:host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.has-focus.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-valid.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon {
+  color: var(--highlight-color);
+}
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index 5d556e11f9..220c263c7f 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -12,14 +12,6 @@
   --highlight-height: 2px;
 }
 
-.select-icon {
-  width: $select-md-icon-size;
-
-  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
-
-  color: #{$text-color-step-500};
-}
-
 // Select Label
 // ----------------------------------------------------------------
 
@@ -29,9 +21,9 @@
  * only apply to floating or stacked labels.
  */
 :host(.select-label-placement-floating.select-expanded) .label-text-wrapper,
-:host(.select-label-placement-floating.ion-focused) .label-text-wrapper,
+:host(.select-label-placement-floating.has-focus) .label-text-wrapper,
 :host(.select-label-placement-stacked.select-expanded) .label-text-wrapper,
-:host(.select-label-placement-stacked.ion-focused) .label-text-wrapper {
+:host(.select-label-placement-stacked.has-focus) .label-text-wrapper {
   color: var(--highlight-color);
 }
 
@@ -61,7 +53,7 @@
 }
 
 :host(.select-expanded) .select-highlight,
-:host(.ion-focused) .select-highlight {
+:host(.has-focus) .select-highlight {
   transform: scale(1);
 }
 
@@ -77,6 +69,14 @@
 // Select Icon
 // ----------------------------------------------------------------
 
+.select-icon {
+  width: $select-md-icon-size;
+
+  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+
+  color: #{$select-md-icon-color};
+}
+
 /**
  * This rotates the chevron icon
  * when the select is activated.
@@ -86,6 +86,18 @@
   @include transform(rotate(180deg));
 }
 
+/**
+ * When the select has no fill and
+ * in an item, then the icon should
+ * be the same color as the text color.
+ */
+:host(.in-item.select-expanded) .select-wrapper .select-icon,
+:host(.in-item.has-focus) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-valid) .select-wrapper .select-icon,
+:host(.in-item.ion-touched.ion-invalid) .select-wrapper .select-icon {
+  color: #{$select-md-icon-color};
+}
+
 /**
  * When the select is focused the icon should
  * take on the highlight color.
@@ -95,7 +107,7 @@
 :host(.select-expanded) .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 {
+:host(.has-focus) .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 321065ea80..12a42d2222 100644
--- a/core/src/components/select/select.md.solid.scss
+++ b/core/src/components/select/select.md.solid.scss
@@ -27,6 +27,7 @@
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
+:host(.select-expanded.select-fill-solid.ion-valid),
 :host(.has-focus.select-fill-solid.ion-valid),
 :host(.select-fill-solid.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
@@ -56,9 +57,9 @@
  * much darker on focus.
  */
 :host(.select-fill-solid.select-expanded),
-:host(.select-fill-solid.ion-focused) {
+:host(.select-fill-solid.has-focus) {
   --background: #{$background-color-step-150};
-  --border-color: #{$background-color-step-750};
+  --border-color: var(--highlight-color);
 }
 
 :host(.select-fill-solid) .select-wrapper {
@@ -79,3 +80,18 @@
    */
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
+
+// Select Icon
+// ----------------------------------------------------------------
+
+/**
+ * When the select has a solid fill and
+ * in an item, then the icon should
+ * take on the highlight color.
+ */
+:host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-valid.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon {
+  color: var(--highlight-color);
+}
diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss
index a8540da58a..d3d1965b69 100644
--- a/core/src/components/select/select.md.vars.scss
+++ b/core/src/components/select/select.md.vars.scss
@@ -6,6 +6,10 @@
 
 /// @prop - Size of the select icon
 $select-md-icon-size:           dynamic-font(13px);
+
+/// @prop - Color of the select icon
+$select-md-icon-color:          $text-color-step-500;
+
 /// @prop - The amount of whitespace to display on either side of the floating label
 $select-md-floating-label-padding:         4px;
 
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index cd0a7707aa..157b2f5e35 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -88,7 +88,7 @@
   pointer-events: none;
 }
 
-:host(.ion-focused) button {
+:host(.has-focus) button {
   border: 2px solid #5e9ed6;
 }
 
@@ -308,7 +308,9 @@ button {
  * highlight when the select is blurred.
  */
 :host(.has-focus.ion-valid),
-:host(.ion-touched.ion-invalid) {
+:host(.select-expanded.ion-valid),
+:host(.ion-touched.ion-invalid),
+:host(.select-expanded.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
 
@@ -320,7 +322,7 @@ button {
  * present on the select. Otherwise the helper text should
  * be shown.
  */
- .select-bottom .error-text {
+.select-bottom .error-text {
   display: none;
 
   color: var(--highlight-color-invalid);
@@ -597,7 +599,7 @@ button {
  * :host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder
  */
 :host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,
+:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,
 :host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 1;
 }
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index df432d8af8..7fc456092d 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -71,6 +71,16 @@ export class Select implements ComponentInterface {
 
   @State() isExpanded = false;
 
+  /**
+   * The `hasFocus` state ensures the focus class is
+   * added regardless of how the element is focused.
+   * The `ion-focused` class only applies when focused
+   * via tabbing, not by clicking.
+   * The `has-focus` logic was added to ensure the class
+   * is applied in both cases.
+   */
+  @State() hasFocus = false;
+
   /**
    * The text to display on the cancel button.
    */
@@ -852,10 +862,14 @@ export class Select implements ComponentInterface {
   };
 
   private onFocus = () => {
+    this.hasFocus = true;
+
     this.ionFocus.emit();
   };
 
   private onBlur = () => {
+    this.hasFocus = false;
+
     this.ionBlur.emit();
   };
 
@@ -1090,8 +1104,20 @@ export class Select implements ComponentInterface {
   }
 
   render() {
-    const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } =
-      this;
+    const {
+      disabled,
+      el,
+      isExpanded,
+      expandedIcon,
+      labelPlacement,
+      justify,
+      placeholder,
+      fill,
+      shape,
+      name,
+      value,
+      hasFocus,
+    } = this;
     const mode = getIonMode(this);
     const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
     const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
@@ -1137,6 +1163,8 @@ export class Select implements ComponentInterface {
           'has-value': hasValue,
           'label-floating': labelShouldFloat,
           'has-placeholder': placeholder !== undefined,
+          'has-focus': hasFocus,
+          // TODO(FW-6451): Remove `ion-focusable` class in favor of `has-focus`.
           'ion-focusable': true,
           [`select-${rtl}`]: true,
           [`select-fill-${fill}`]: fill !== undefined,
diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts
index c04899fe92..d5a9c3d220 100644
--- a/core/src/components/select/test/basic/select.e2e.ts
+++ b/core/src/components/select/test/basic/select.e2e.ts
@@ -324,3 +324,49 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     });
   });
 });
+
+/**
+ * focus has a consistent behavior across modes
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('select: focus'), () => {
+    test('should have the focus class when tabbing', async ({ page, pageUtils }) => {
+      await page.setContent(
+        `
+        <ion-select aria-label="Fruit" interface="alert">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+
+      await pageUtils.pressKeys('Tab');
+      await expect(select).toHaveClass(/has-focus/);
+    });
+
+    test('should have the focus class after clicking to close', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select aria-label="Fruit" interface="alert">
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const select = page.locator('ion-select');
+      const alert = page.locator('ion-alert');
+      const confirmButton = alert.locator('.alert-button:not(.alert-button-role-cancel)');
+
+      await select.click();
+      await ionAlertDidPresent.next();
+
+      await confirmButton.click();
+
+      await expect(select).toHaveClass(/has-focus/);
+    });
+  });
+});
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png
index d4cc64abbc..1fc69f2a2c 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png
index a85cc6a5d4..09dbd660ee 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Safari-linux.png
index a053819fd5..61ff0d1fc6 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png
index f681df3c16..b8f081c867 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png
index 9a6b6a34ed..e13afdfc58 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Safari-linux.png
index de421cc693..e6e9c4fdb8 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/color/select.e2e.ts b/core/src/components/select/test/color/select.e2e.ts
index 9ba5e0e2ed..d28a3f08e8 100644
--- a/core/src/components/select/test/color/select.e2e.ts
+++ b/core/src/components/select/test/color/select.e2e.ts
@@ -7,7 +7,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       test('should set label and highlight color on expand', async ({ page }) => {
         await page.setContent(
           `
-          <ion-select label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
+          <ion-select label="Label" class="select-expanded" value="apple" class="has-focus" color="danger">
             <ion-select-option value="apple">Apple</ion-select-option>
           </ion-select>
         `,
@@ -22,7 +22,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       test('should set label and highlight color on expand', async ({ page }) => {
         await page.setContent(
           `
-          <ion-select fill="solid" label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
+          <ion-select fill="solid" label="Label" class="select-expanded" value="apple" class="has-focus" color="danger">
             <ion-select-option value="apple">Apple</ion-select-option>
           </ion-select>
         `,
@@ -37,7 +37,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       test('should set label and highlight color on expand', async ({ page }) => {
         await page.setContent(
           `
-          <ion-select fill="outline" label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
+          <ion-select fill="outline" label="Label" class="select-expanded" value="apple" class="has-focus" color="danger">
             <ion-select-option value="apple">Apple</ion-select-option>
           </ion-select>
         `,
diff --git a/core/src/components/select/test/highlight/index.html b/core/src/components/select/test/highlight/index.html
index 9d206b804f..fc623e6394 100644
--- a/core/src/components/select/test/highlight/index.html
+++ b/core/src/components/select/test/highlight/index.html
@@ -56,14 +56,14 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select label-placement="start" value="hi@ionic.io" class="ion-focused" label="Fruit">
+            <ion-select label-placement="start" value="hi@ionic.io" class="has-focus" 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="ion-valid ion-focused" label="Fruit">
+            <ion-select label-placement="start" class="ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -80,14 +80,14 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select label-placement="floating" value="hi@ionic.io" class="ion-focused" label="Fruit">
+            <ion-select label-placement="floating" value="hi@ionic.io" class="has-focus" 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="floating" class="ion-valid ion-focused" label="Fruit">
+            <ion-select label-placement="floating" class="ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -104,14 +104,14 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select label-placement="stacked" value="hi@ionic.io" class="ion-focused" label="Fruit">
+            <ion-select label-placement="stacked" value="hi@ionic.io" class="has-focus" 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="stacked" class="ion-valid ion-focused" label="Fruit">
+            <ion-select label-placement="stacked" class="ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -128,14 +128,14 @@
         <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 label-placement="start" value="hi@ionic.io" class="custom has-focus" 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 label-placement="start" class="custom ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -152,14 +152,14 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="solid" label-placement="start" value="hi@ionic.io" class="ion-focused" label="Fruit">
+            <ion-select fill="solid" label-placement="start" value="hi@ionic.io" class="has-focus" 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="ion-valid ion-focused" label="Fruit">
+            <ion-select fill="solid" label-placement="start" class="ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -176,14 +176,14 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="solid" label-placement="floating" value="hi@ionic.io" class="ion-focused" label="Fruit">
+            <ion-select fill="solid" label-placement="floating" value="hi@ionic.io" class="has-focus" 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="floating" class="ion-valid ion-focused" label="Fruit">
+            <ion-select fill="solid" label-placement="floating" class="ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -200,14 +200,14 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="solid" label-placement="stacked" value="hi@ionic.io" class="ion-focused" label="Fruit">
+            <ion-select fill="solid" label-placement="stacked" value="hi@ionic.io" class="has-focus" 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="stacked" class="ion-valid ion-focused" label="Fruit">
+            <ion-select fill="solid" label-placement="stacked" class="ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -224,20 +224,14 @@
         <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 fill="solid" label-placement="start" value="hi@ionic.io" class="custom has-focus" 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 fill="solid" label-placement="start" class="custom ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -254,14 +248,14 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="outline" label-placement="start" value="hi@ionic.io" class="ion-focused" label="Fruit">
+            <ion-select fill="outline" label-placement="start" value="hi@ionic.io" class="has-focus" 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="ion-valid ion-focused" label="Fruit">
+            <ion-select fill="outline" label-placement="start" class="ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -278,14 +272,14 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="outline" label-placement="floating" value="hi@ionic.io" class="ion-focused" label="Fruit">
+            <ion-select fill="outline" label-placement="floating" value="hi@ionic.io" class="has-focus" 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="floating" class="ion-valid ion-focused" label="Fruit">
+            <ion-select fill="outline" label-placement="floating" class="ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -302,14 +296,14 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Focus</h2>
-            <ion-select fill="outline" label-placement="stacked" value="hi@ionic.io" class="ion-focused" label="Fruit">
+            <ion-select fill="outline" label-placement="stacked" value="hi@ionic.io" class="has-focus" 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="stacked" class="ion-valid ion-focused" label="Fruit">
+            <ion-select fill="outline" label-placement="stacked" class="ion-valid has-focus" label="Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -330,7 +324,7 @@
               fill="outline"
               label-placement="start"
               value="hi@ionic.io"
-              class="custom ion-focused"
+              class="custom has-focus"
               label="Fruit"
             >
               <ion-select-option value="apple">Apple</ion-select-option>
@@ -339,7 +333,7 @@
 
           <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 fill="outline" label-placement="start" class="custom ion-valid has-focus" 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 23fd444c56..257d4332bd 100644
--- a/core/src/components/select/test/highlight/select.e2e.ts
+++ b/core/src/components/select/test/highlight/select.e2e.ts
@@ -7,41 +7,114 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select value="apple" class="ion-valid has-focus" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select value="apple" class="ion-valid has-focus" label="Favorite Fruit">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-valid`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-no-fill-valid`));
       });
       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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select value="apple" class="ion-touched ion-invalid" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select value="apple" class="ion-touched ion-invalid" label="Favorite Fruit">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-no-fill-invalid`));
+      });
+      test('should render invalid with focus state correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select value="apple" class="ion-touched ion-invalid has-focus" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select value="apple" class="ion-touched ion-invalid has-focus" label="Favorite Fruit">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-invalid`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-no-fill-invalid-focus`));
       });
       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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select value="apple" class="has-focus" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select value="apple" class="has-focus" label="Favorite Fruit">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-focus`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-no-fill-focus`));
       });
       test('should render custom highlight correctly', async ({ page }) => {
         await page.setContent(
@@ -56,15 +129,15 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           </style>
 
           <div class="container">
-            <ion-select value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+            <ion-select value="apple" class="custom ion-valid has-focus" 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 value="apple" class="custom ion-touched ion-invalid has-focus" 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 value="apple" class="custom has-focus" label="Favorite Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -80,41 +153,86 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select fill="solid" value="apple" class="ion-valid has-focus" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select fill="solid" value="apple" class="ion-valid has-focus" label="Favorite Fruit">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-solid-valid`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-solid-valid`));
       });
       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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <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>
+            <ion-list>
+              <ion-item>
+                <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>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-solid-invalid`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-solid-invalid`));
       });
       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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select fill="solid" value="apple" class="has-focus" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select fill="solid" value="apple" class="has-focus" label="Favorite Fruit">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-solid-focus`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-solid-focus`));
       });
       test('should render custom highlight correctly', async ({ page }) => {
         await page.setContent(
@@ -129,15 +247,15 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           </style>
 
           <div class="container">
-            <ion-select fill="solid" value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+            <ion-select fill="solid" value="apple" class="custom ion-valid has-focus" 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 fill="solid" value="apple" class="custom ion-touched ion-invalid has-focus" 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 fill="solid" value="apple" class="custom has-focus" label="Favorite Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -153,41 +271,86 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select fill="outline" value="apple" class="ion-valid has-focus" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select fill="outline" value="apple" class="ion-valid has-focus" label="Favorite Fruit">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-outline-valid`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-outline-valid`));
       });
       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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select fill="outline" value="apple" class="ion-touched ion-invalid has-focus" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select fill="outline" value="apple" class="ion-touched ion-invalid has-focus" label="Favorite Fruit">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-outline-invalid`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-outline-invalid`));
       });
       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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select fill="outline" value="apple" class="has-focus" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select fill="outline" value="apple" class="has-focus" label="Favorite Fruit">
+                  <ion-select-option value="apple">Apple</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-outline-focus`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-outline-focus`));
       });
       test('should render custom highlight correctly', async ({ page }) => {
         await page.setContent(
@@ -202,15 +365,15 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           </style>
 
           <div class="container">
-            <ion-select fill="outline" value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+            <ion-select fill="outline" value="apple" class="custom ion-valid has-focus" 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 fill="outline" value="apple" class="custom ion-touched ion-invalid has-focus" 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 fill="outline" value="apple" class="custom has-focus" label="Favorite Fruit">
               <ion-select-option value="apple">Apple</ion-select-option>
             </ion-select>
           </div>
@@ -229,39 +392,78 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       test('should render bottom highlight', async ({ page }) => {
         await page.setContent(
           `
-          <ion-select label="Label" class="select-expanded"></ion-select>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select label="Label" class="select-expanded"></ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select label="Label" class="select-expanded"></ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-highlight`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-no-fill-highlight`));
       });
     });
     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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select fill="solid" label="Label" class="select-expanded"></ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select fill="solid" label="Label" class="select-expanded"></ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-solid-highlight`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-solid-highlight`));
       });
     });
     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>
+          <style>
+            #container {
+              display: grid;
+              gap: 5px;
+            }
+          </style>
+          <div id="container">
+            <ion-select fill="outline" label="Label" class="select-expanded"></ion-select>
+            <ion-list>
+              <ion-item>
+                <ion-select fill="outline" label="Label" class="select-expanded"></ion-select>
+              </ion-item>
+            </ion-list>
+          </div>
         `,
           config
         );
 
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-outline-highlight`));
+        const container = page.locator('#container');
+        await expect(container).toHaveScreenshot(screenshot(`select-outline-highlight`));
       });
     });
   });
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
index c51b4aaf3a..0d66b48499 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Chrome-linux.png 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
index 2b893c508c..fe35e86ace 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Firefox-linux.png 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
index 0b21560a84..2fda5ff067 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-focus-md-ltr-Mobile-Safari-linux.png 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-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Chrome-linux.png
index a1943b028d..01f2607f10 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Firefox-linux.png
index d4e7f7c98b..7efaf029f1 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Safari-linux.png
index 0d4c6c5157..21569fcb9f 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4f64caaa2d
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..17374b1cde
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6a66fadd79
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-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
index a252b18777..5e2173d350 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png 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
index 108e8a37df..d5e00ca8d3 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png 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
index 0fedf66b3a..39f2939c4e 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-invalid-md-ltr-Mobile-Safari-linux.png 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
index 2c15c40fb4..a563e02218 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Chrome-linux.png 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
index 5b6d1f853d..0daf67b642 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Firefox-linux.png 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
index 90ce749e75..054c060162 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-valid-md-ltr-Mobile-Safari-linux.png 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
index c93c593b79..4ddc2e8060 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Chrome-linux.png 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
index b64a1f8e9c..2ecf480b77 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Firefox-linux.png 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
index dd466202f3..ff862429c7 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-md-ltr-Mobile-Safari-linux.png 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-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Chrome-linux.png
index 1fc1d7cfab..8a6937307f 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Firefox-linux.png
index ec0dd16c8c..6c0cd64de3 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Safari-linux.png
index d55c486331..2c987d69ca 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-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
index fae85803bf..9af9159021 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Chrome-linux.png 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
index e7ecdda8fd..a78ab82185 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Firefox-linux.png 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
index 726ae82650..429f23da3b 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-md-ltr-Mobile-Safari-linux.png 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
index 8d8a399737..a50344ed3b 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Chrome-linux.png 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
index ae183193c9..65ff8259d9 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Firefox-linux.png 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
index db0ab31a25..21c81b27e8 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-md-ltr-Mobile-Safari-linux.png 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
index a4ce286609..1f4dab6c1f 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Chrome-linux.png 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
index 4108e541e2..ecf4734a1f 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Firefox-linux.png 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
index f4cdcc0aeb..cb41984f26 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-focus-md-ltr-Mobile-Safari-linux.png 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-highlight-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Chrome-linux.png
index 800907d302..737236497c 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Firefox-linux.png
index 5d0ea24f6c..1a7559701d 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Safari-linux.png
index bfb8867a3d..6eec773628 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-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
index a3c7e09420..a340d86993 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Chrome-linux.png 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
index b9061f96f8..004b13c342 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Firefox-linux.png 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
index 2387a9243b..e2446623ce 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-invalid-md-ltr-Mobile-Safari-linux.png 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
index b1c7f080a7..61021ba07d 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Chrome-linux.png 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
index 334f48308e..c33caea5d8 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Firefox-linux.png 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
index 2b56a8d609..0597a1ef08 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-valid-md-ltr-Mobile-Safari-linux.png 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/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 7764dfba8b..afb9e3bf6b 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -70,6 +70,14 @@ export class Textarea implements ComponentInterface {
 
   @Element() el!: HTMLIonTextareaElement;
 
+  /**
+   * The `hasFocus` state ensures the focus class is
+   * added regardless of how the element is focused.
+   * The `ion-focused` class only applies when focused
+   * via tabbing, not by clicking.
+   * The `has-focus` logic was added to ensure the class
+   * is applied in both cases.
+   */
   @State() hasFocus = false;
 
   /**