diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.common.scss
similarity index 83%
rename from core/src/components/select/select.scss
rename to core/src/components/select/select.common.scss
index 0da89d4dc06..380f75e1341 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.common.scss
@@ -1,3 +1,4 @@
+@use "../../themes/mixins" as mixins;
 @import "./select.vars";
 
 // Select
@@ -31,7 +32,6 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: #{$placeholder-opacity};
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: #{ion-color(primary, base)};
@@ -52,12 +52,9 @@
   width: 100%;
   min-height: 44px;
 
-  font-family: $font-family-base;
-
   white-space: nowrap;
 
   cursor: pointer;
-  z-index: $z-index-item-input;
 }
 
 /**
@@ -115,17 +112,13 @@
 }
 
 button {
-  @include visually-hidden();
+  @include mixins.visually-hidden();
 }
 
 // Select Icon
 // --------------------------------------------------
 
 .select-icon {
-  @include margin(0, 0, 0, $select-icon-margin-start);
-
-  position: relative;
-
   /**
    * Prevent the icon from shrinking when the label and/or
    * selected item text is long enough to fill the rest of
@@ -143,18 +136,6 @@ button {
   color: inherit;
 }
 
-/**
- * The select icon should be centered with
- * the entire container not just the control
- * with floating/stacked labels.
- */
-:host(.select-label-placement-stacked) .select-icon,
-:host(.select-label-placement-floating) .select-icon {
-  position: absolute;
-
-  height: 100%;
-}
-
 /**
  * This positions the icon at the correct
  * edge of the component with LTR and RTL
@@ -193,9 +174,6 @@ button {
 // --------------------------------------------------
 
 .select-wrapper {
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  @include border-radius(var(--border-radius));
-
   display: flex;
 
   position: relative;
@@ -389,15 +367,6 @@ button {
   flex-direction: row;
 }
 
-:host(.select-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 // Select Label Placement - End
 // ----------------------------------------------------------------
 
@@ -409,27 +378,6 @@ button {
   flex-direction: row-reverse;
 }
 
-/**
- * The margin between the label and
- * the select should be on the start
- * when the label sits at the end.
- */
-:host(.select-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
-}
-
-// Select Label Placement - Fixed
-// ----------------------------------------------------------------
-
-:host(.select-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 /**
  * Label is on the left of the select in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -488,28 +436,11 @@ button {
  */
 :host(.select-label-placement-stacked) .native-wrapper,
 :host(.select-label-placement-floating) .native-wrapper {
-  @include margin(1px, 0, 0, 0);
-
   flex-grow: 1;
 
   width: 100%;
 }
 
-/**
- * This makes the label sit over the select
- * when the select is blurred and has no value.
- * The label should not sit over the select if the
- * select has a placeholder.
- * Note: This is different from what ion-input does
- * because the activating the select causes an overlay
- * to appear. This makes it hard to read the placeholder.
- * With ion-input, the input just focuses and the placeholder
- * is still easy to read.
- */
-:host(.select-label-placement-floating) .label-text-wrapper {
-  @include transform(translateY(100%), scale(1));
-}
-
 /**
  * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
@@ -537,19 +468,6 @@ button {
   opacity: 1;
 }
 
-/**
- * This makes the label sit above the input.
- */
-:host(.label-floating) .label-text-wrapper {
-  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc(100% / #{$form-control-label-stacked-scale});
-}
-
 // Start/End Slots
 // ----------------------------------------------------------------
 
@@ -564,11 +482,9 @@ button {
 }
 
 ::slotted([slot="start"]:last-of-type) {
-  margin-inline-end: $form-control-label-margin;
   margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]:first-of-type) {
-  margin-inline-start: $form-control-label-margin;
   margin-inline-end: 0;
 }
diff --git a/core/src/components/select/select.ionic.outline.scss b/core/src/components/select/select.ionic.outline.scss
new file mode 100644
index 00000000000..77427dd2838
--- /dev/null
+++ b/core/src/components/select/select.ionic.outline.scss
@@ -0,0 +1,52 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Select Fill: Outline (Ionic Theme)
+// ----------------------------------------------------------------
+
+:host(.ion-color) {
+  --border-color: #{globals.current-color(base)};
+}
+
+// Select Label
+// ----------------------------------------------------------------
+
+:host(.select-fill-outline) .label-text-wrapper {
+  /**
+   * The label should appear on top of an outline
+   * container that overlaps it so it is always clickable.
+   */
+  position: relative;
+}
+
+// Select Inner Wrapper
+// ----------------------------------------------------------------
+
+:host(.select-fill-outline) .select-wrapper-inner {
+  @include globals.border-radius(var(--border-radius));
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
+  /**
+  * Apply the background to the native select
+  * wrapper to only style the select.
+  */
+  background: var(--background);
+}
+
+// Outline Container
+// ----------------------------------------------------------------
+
+:host(.select-fill-outline) .select-outline {
+  @include globals.position(0, 0, 0, 0);
+  @include globals.border-radius(var(--border-radius));
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  pointer-events: none;
+
+  border: var(--border-width) var(--border-style) var(--border-color);
+
+  box-sizing: border-box;
+}
diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss
new file mode 100644
index 00000000000..5a7a17f488e
--- /dev/null
+++ b/core/src/components/select/select.ionic.scss
@@ -0,0 +1,185 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./select.common";
+@use "./select.ionic.outline" as outline;
+
+// Ionic Select
+// -------------------------------------------------
+
+:host {
+  --background: #{globals.$ion-primitives-base-white};
+  // TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
+  // ios and md. This will allow us to have a single color map.
+  --border-color: #{globals.current-color(neutral)};
+  --border-radius: #{globals.$ion-border-radius-400};
+  --border-width: #{globals.$ion-border-size-025};
+  --padding-start: #{globals.$ion-space-400};
+  --padding-end: #{globals.$ion-space-400};
+  --padding-top: #{globals.$ion-space-300};
+  --padding-bottom: #{globals.$ion-space-300};
+  --placeholder-color: #{globals.$ion-primitives-neutral-800};
+  --placeholder-opacity: 1;
+}
+
+// Select Label
+// ----------------------------------------------------------------
+
+.label-text-wrapper {
+  @include globals.typography(globals.$ion-body-sm-medium);
+
+  color: globals.$ion-primitives-neutral-1000;
+}
+
+// Select Label Placement - Start & Fixed
+// ----------------------------------------------------------------
+
+:host(.select-label-placement-start) .label-text-wrapper,
+:host(.select-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the end
+   * when the label sits at the start.
+   */
+  @include globals.margin(0, globals.$ion-space-100, 0, 0);
+}
+
+// Select Label Placement - End
+// ----------------------------------------------------------------
+
+:host(.select-label-placement-end) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the start
+   * when the label sits at the end.
+   */
+  @include globals.margin(0, 0, 0, globals.$ion-space-100);
+}
+
+// Select Label Placement - Stacked & Floating
+// ----------------------------------------------------------------
+
+:host(.select-label-placement-stacked) .label-text-wrapper,
+:host(.select-label-placement-floating) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the bottom
+   * when the label sits at the top.
+   */
+  @include globals.margin(0, 0, globals.$ion-space-100, 0);
+}
+
+// Select Wrapper
+// ----------------------------------------------------------------
+
+.select-wrapper {
+  min-width: globals.$ion-scale-5000;
+
+  background: transparent;
+}
+
+// Select Inner Wrapper
+// ----------------------------------------------------------------
+
+.select-wrapper-inner {
+  @include globals.border-radius(var(--border-radius));
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
+  position: relative;
+
+  height: globals.$ion-scale-1200;
+
+  background: var(--background);
+
+  box-sizing: border-box;
+
+  gap: globals.$ion-space-200;
+}
+
+:host(.select-label-placement-stacked) .select-wrapper-inner,
+:host(.select-label-placement-floating) .select-wrapper-inner {
+  width: 100%;
+}
+
+// Select Native Wrapper
+// ----------------------------------------------------------------
+
+.native-wrapper {
+  @include globals.typography(globals.$ion-body-md-regular);
+
+  color: globals.$ion-primitives-neutral-1200;
+}
+
+:host(.select-label-placement-stacked) .native-wrapper,
+:host(.select-label-placement-floating) .native-wrapper {
+  /**
+   * Text should not extend beyond the bounds of the select.
+   * This is done by setting the width to the full width minus
+   * the icon width and the gap between the icon and the text.
+   */
+  width: calc(100% - globals.$ion-scale-400 - globals.$ion-space-200);
+}
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+
+  aspect-ratio: 1;
+}
+
+// Select Icon
+// --------------------------------------------------
+
+.select-icon,
+::slotted(ion-icon) {
+  width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
+}
+
+.select-icon {
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/**
+ * This rotates the chevron icon
+ * when the select is activated.
+ * This should only happen on MD.
+ */
+:host(.select-expanded:not(.has-expanded-icon)) .select-icon {
+  @include globals.transform(rotate(180deg));
+}
+
+.select-icon {
+  color: globals.$ion-primitives-neutral-800;
+}
+
+// States
+// ----------------------------------------------------------------
+
+// Disabled
+// ----------------------------------------------------------------
+
+:host(.select-disabled) {
+  --background: #{globals.$ion-primitives-neutral-100};
+  --border-color: #{globals.$ion-primitives-neutral-300};
+}
+
+:host(.select-disabled) .label-text-wrapper,
+// Targets the text inside the select and the placeholder
+:host(.select-disabled) .select-text,
+:host(.select-disabled) .select-icon {
+  color: globals.$ion-primitives-neutral-500;
+}
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
index a1d3f5df087..7a7a4139f69 100644
--- a/core/src/components/select/select.ios.scss
+++ b/core/src/components/select/select.ios.scss
@@ -1,4 +1,4 @@
-@import "./select";
+@import "./select.native";
 @import "./select.ios.vars";
 
 // iOS Select
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index 9b106f06dbd..4d19c8419af 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -1,4 +1,4 @@
-@import "./select";
+@import "./select.native";
 @import "./select.md.vars";
 @import "./select.md.solid.scss";
 @import "./select.md.outline.scss";
diff --git a/core/src/components/select/select.native.scss b/core/src/components/select/select.native.scss
new file mode 100644
index 00000000000..8c60a4f7ccb
--- /dev/null
+++ b/core/src/components/select/select.native.scss
@@ -0,0 +1,130 @@
+@import "../../themes/native/native.globals";
+@import "./select.common";
+
+// Select: Native
+// --------------------------------------------------
+
+:host {
+  --placeholder-opacity: #{$placeholder-opacity};
+
+  font-family: $font-family-base;
+
+  z-index: $z-index-item-input;
+}
+
+// Select Icon
+// --------------------------------------------------
+
+.select-icon {
+  @include margin(0, 0, 0, $select-icon-margin-start);
+
+  position: relative;
+}
+
+/**
+ * The select icon should be centered with
+ * the entire container not just the control
+ * with floating/stacked labels.
+ */
+:host(.select-label-placement-stacked) .select-icon,
+:host(.select-label-placement-floating) .select-icon {
+  position: absolute;
+
+  height: 100%;
+}
+
+// Select Wrapper
+// --------------------------------------------------
+
+.select-wrapper {
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include border-radius(var(--border-radius));
+}
+
+// Select Label Placement - Start
+// ----------------------------------------------------------------
+
+:host(.select-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, $form-control-label-margin, 0, 0);
+}
+
+// Select Label Placement - End
+// ----------------------------------------------------------------
+/**
+ * The margin between the label and
+ * the select should be on the start
+ * when the label sits at the end.
+ */
+:host(.select-label-placement-end) .label-text-wrapper {
+  @include margin(0, 0, 0, $form-control-label-margin);
+}
+
+// Select Label Placement - Fixed
+// ----------------------------------------------------------------
+
+:host(.select-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, $form-control-label-margin, 0, 0);
+}
+
+// Select Label Placement - Stacked and Floating
+// ----------------------------------------------------------------
+
+/**
+ * Ensures the select does not
+ * overlap the label.
+ * Also ensure that the native wrapper
+ * takes up the remaining available height and width.
+ */
+:host(.select-label-placement-stacked) .native-wrapper,
+:host(.select-label-placement-floating) .native-wrapper {
+  @include margin(1px, 0, 0, 0);
+}
+
+/**
+ * This makes the label sit over the select
+ * when the select is blurred and has no value.
+ * The label should not sit over the select if the
+ * select has a placeholder.
+ * Note: This is different from what ion-input does
+ * because the activating the select causes an overlay
+ * to appear. This makes it hard to read the placeholder.
+ * With ion-input, the input just focuses and the placeholder
+ * is still easy to read.
+ */
+:host(.select-label-placement-floating) .label-text-wrapper {
+  @include transform(translateY(100%), scale(1));
+}
+
+/**
+ * This makes the label sit above the input.
+ */
+:host(.label-floating) .label-text-wrapper {
+  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+::slotted([slot="start"]:last-of-type) {
+  margin-inline-end: $form-control-label-margin;
+}
+
+::slotted([slot="end"]:first-of-type) {
+  margin-inline-start: $form-control-label-margin;
+}
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index ab0de8f0f3e..3efd9c8acb3 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -50,7 +50,7 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
   styleUrls: {
     ios: 'select.ios.scss',
     md: 'select.md.scss',
-    ionic: 'select.md.scss',
+    ionic: 'select.ionic.scss',
   },
   shadow: true,
 })
@@ -1050,6 +1050,8 @@ export class Select implements ComponentInterface {
       this;
     const theme = getIonTheme(this);
     const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
+    const shouldRenderOuterIcon = theme !== 'ionic' && hasFloatingOrStackedLabel;
+    const shouldRenderInnerIcon = theme === 'ionic' || !hasFloatingOrStackedLabel;
     const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
     const inItem = hostContext('ion-item', this.el);
@@ -1104,13 +1106,25 @@ export class Select implements ComponentInterface {
         <label class="select-wrapper" id="select-label">
           {this.renderLabelContainer()}
           <div class="select-wrapper-inner">
+            {
+              /**
+               * For the ionic theme, we render the outline container here
+               * instead of higher up, so it can be positioned relative to
+               * the native wrapper instead of the <label> element or the
+               * entire component. This allows the label text to be positioned
+               * above the outline, while staying within the bounds of the
+               * <label> element, ensuring that clicking the label text
+               * focuses the select.
+               */
+              theme === 'ionic' && fill === 'outline' && <div class="select-outline"></div>
+            }
             <slot name="start"></slot>
             <div class="native-wrapper" ref={(el) => (this.nativeWrapperEl = el)} part="container">
               {this.renderSelectText()}
               {this.renderListbox()}
             </div>
             <slot name="end"></slot>
-            {!hasFloatingOrStackedLabel && this.renderSelectIcon()}
+            {shouldRenderInnerIcon && this.renderSelectIcon()}
           </div>
           {/**
            * The icon in a floating/stacked select
@@ -1121,7 +1135,7 @@ export class Select implements ComponentInterface {
            * icon outside the inner wrapper, which holds
            * those components.
            */}
-          {hasFloatingOrStackedLabel && this.renderSelectIcon()}
+          {shouldRenderOuterIcon && this.renderSelectIcon()}
           {shouldRenderHighlight && <div class="select-highlight"></div>}
         </label>
       </Host>
diff --git a/core/src/components/select/select.vars.scss b/core/src/components/select/select.vars.scss
index 1b04994b168..3658ed826bf 100644
--- a/core/src/components/select/select.vars.scss
+++ b/core/src/components/select/select.vars.scss
@@ -1,4 +1,2 @@
-@import "../../themes/native/native.globals";
-
 /// @prop - Margin start of the select icon
 $select-icon-margin-start: 4px;
diff --git a/core/src/components/select/test/color/select.e2e.ts b/core/src/components/select/test/color/select.e2e.ts
index 9ba5e0e2ed0..d49867ee424 100644
--- a/core/src/components/select/test/color/select.e2e.ts
+++ b/core/src/components/select/test/color/select.e2e.ts
@@ -1,13 +1,13 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input: color'), () => {
-    test.describe('input: fill none', () => {
+    test.describe('input: fill outline', () => {
       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 fill="outline" label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
             <ion-select-option value="apple">Apple</ion-select-option>
           </ion-select>
         `,
@@ -15,14 +15,19 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-color`));
+        await expect(select).toHaveScreenshot(screenshot(`select-outline-color`));
       });
     });
-    test.describe('input: fill solid', () => {
+  });
+});
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: color'), () => {
+    test.describe('input: fill none', () => {
       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 label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
             <ion-select-option value="apple">Apple</ion-select-option>
           </ion-select>
         `,
@@ -30,14 +35,14 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-solid-color`));
+        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-color`));
       });
     });
-    test.describe('input: fill outline', () => {
+    test.describe('input: fill solid', () => {
       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="solid" label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
             <ion-select-option value="apple">Apple</ion-select-option>
           </ion-select>
         `,
@@ -45,7 +50,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-outline-color`));
+        await expect(select).toHaveScreenshot(screenshot(`select-solid-color`));
       });
     });
   });
diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9647eccce51
Binary files /dev/null and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..28aed88baf7
Binary files /dev/null and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2b641cdedd2
Binary files /dev/null and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts b/core/src/components/select/test/custom/select.e2e.ts
index 58232365170..ca82fd86f78 100644
--- a/core/src/components/select/test/custom/select.e2e.ts
+++ b/core/src/components/select/test/custom/select.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: custom'), () => {
     test('should be able to customize select using css apis', async ({ page }) => {
       test.info().annotations.push({
@@ -64,6 +64,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ion-select::part(label) {
             color: green;
           }
+
+          ion-select::part(placeholder) {
+            color: purple;
+          }
         </style>
       `,
         config
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a875da746d4
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..64aede09fed
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5f75f8d83a1
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c4299d65bb8
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..143798a0f30
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..67af6bf7977
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/index.html b/core/src/components/select/test/fill/index.html
index b290135980a..6f4bd10462a 100644
--- a/core/src/components/select/test/fill/index.html
+++ b/core/src/components/select/test/fill/index.html
@@ -48,7 +48,9 @@
         <div class="grid">
           <div class="grid-item">
             <h2>No Fill</h2>
-            <ion-select class="no-fill" label="Fruit" value="apple"></ion-select>
+            <ion-select class="no-fill" label="Fruit" value="apple">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
           </div>
 
           <div class="grid-item">
diff --git a/core/src/components/select/test/fill/select.e2e.ts b/core/src/components/select/test/fill/select.e2e.ts
index 350c0b847af..5f54991f9e3 100644
--- a/core/src/components/select/test/fill/select.e2e.ts
+++ b/core/src/components/select/test/fill/select.e2e.ts
@@ -1,14 +1,14 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: fill'), () => {
-    test.describe('select: fill solid', () => {
+    test.describe('select: fill outline', () => {
       test('should not have visual regressions', async ({ page }) => {
         await page.setContent(
           `
           <ion-select
-            fill="solid"
+            fill="outline"
             label="Fruit"
             value="apple"
           >
@@ -19,13 +19,21 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline`));
       });
-      test('should render correctly with floating label', async ({ page }) => {
+      test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(
           `
+          <style>
+            ion-select {
+              --border-radius: 10px !important;
+              --padding-start: 50px !important;
+              --padding-end: 50px !important;
+            }
+          </style>
           <ion-select
-            fill="solid"
+            shape="round"
+            fill="outline"
             label="Fruit"
             label-placement="floating"
             value="apple"
@@ -37,13 +45,19 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid-label-floating`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline-custom`));
       });
-      test('should not have visual regressions with shaped solid', async ({ page }) => {
+    });
+  });
+});
+
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: fill'), () => {
+    test.describe('select: fill solid', () => {
+      test('should not have visual regressions', async ({ page }) => {
         await page.setContent(
           `
           <ion-select
-            shape="round"
             fill="solid"
             label="Fruit"
             value="apple"
@@ -55,20 +69,12 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid`));
       });
-      test('padding and border radius should be customizable', async ({ page }) => {
+      test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(
           `
-          <style>
-            ion-select {
-              --border-radius: 10px !important;
-              --padding-start: 50px !important;
-              --padding-end: 50px !important;
-            }
-          </style>
           <ion-select
-            shape="round"
             fill="solid"
             label="Fruit"
             label-placement="floating"
@@ -81,15 +87,14 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid-custom`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid-label-floating`));
       });
-    });
-    test.describe('select: fill outline', () => {
-      test('should not have visual regressions', async ({ page }) => {
+      test('should not have visual regressions with shaped solid', async ({ page }) => {
         await page.setContent(
           `
           <ion-select
-            fill="outline"
+            shape="round"
+            fill="solid"
             label="Fruit"
             value="apple"
           >
@@ -100,13 +105,21 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid`));
       });
-      test('should render correctly with floating label', async ({ page }) => {
+      test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(
           `
+          <style>
+            ion-select {
+              --border-radius: 10px !important;
+              --padding-start: 50px !important;
+              --padding-end: 50px !important;
+            }
+          </style>
           <ion-select
-            fill="outline"
+            shape="round"
+            fill="solid"
             label="Fruit"
             label-placement="floating"
             value="apple"
@@ -118,16 +131,17 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-label-floating`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid-custom`));
       });
-
-      test('should not have visual regressions with shaped outline', async ({ page }) => {
+    });
+    test.describe('select: fill outline', () => {
+      test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(
           `
           <ion-select
-            shape="round"
             fill="outline"
             label="Fruit"
+            label-placement="floating"
             value="apple"
           >
             <ion-select-option value="apple">Apple</ion-select-option>
@@ -137,23 +151,16 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-label-floating`));
       });
-      test('padding and border radius should be customizable', async ({ page }) => {
+
+      test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(
           `
-          <style>
-            ion-select {
-              --border-radius: 10px !important;
-              --padding-start: 50px !important;
-              --padding-end: 50px !important;
-            }
-          </style>
           <ion-select
             shape="round"
             fill="outline"
             label="Fruit"
-            label-placement="floating"
             value="apple"
           >
             <ion-select-option value="apple">Apple</ion-select-option>
@@ -163,7 +170,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline-custom`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline`));
       });
     });
   });
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fafefce159d
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b4c35809deb
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..da272e11499
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9e0822760d2
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9e853c870a6
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6a5a85d69aa
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..388d539e259
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..52d87bb845b
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..998b85533d3
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ca20cc597c1
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b754a973fbf
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1dea4f4eda8
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts b/core/src/components/select/test/item/select.e2e.ts
index 05ca3e4abb3..5abb7075d76 100644
--- a/core/src/components/select/test/item/select.e2e.ts
+++ b/core/src/components/select/test/item/select.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: item'), () => {
     test('should render correctly in list with no fill', async ({ page }) => {
       await page.setContent(
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d7cd69c9ebe
Binary files /dev/null and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fbabd2302af
Binary files /dev/null and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..245619e4c1c
Binary files /dev/null and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fd95ef363f5
Binary files /dev/null and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..87dc2c8e0c0
Binary files /dev/null and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1f392e93af8
Binary files /dev/null and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a7e5ca4b966
Binary files /dev/null and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7d214af3c45
Binary files /dev/null and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ee415ed49cc
Binary files /dev/null and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts b/core/src/components/select/test/label/select.e2e.ts
index 4999268e4f7..d514918db87 100644
--- a/core/src/components/select/test/label/select.e2e.ts
+++ b/core/src/components/select/test/label/select.e2e.ts
@@ -7,7 +7,7 @@ import { configs, test } from '@utils/test/playwright';
  * used to change the alignment of the select
  * within the container.
  */
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: label'), () => {
     test.describe('select: default placement', () => {
       test('should render a space between justification with a default select', async ({ page }) => {
@@ -35,6 +35,73 @@ configs().forEach(({ title, screenshot, config }) => {
       });
     });
 
+    test.describe('select: stacked placement', () => {
+      test('label should appear above the select when there is a value', async ({ page }) => {
+        await page.setContent(
+          `
+           <ion-select label="Label" value="apples" label-placement="stacked">
+             <ion-select-option value="apples">Apples</ion-select-option>
+           </ion-select>
+         `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-value`));
+      });
+      test('label should appear above the select when there is no value', async ({ page }) => {
+        await page.setContent(
+          `
+           <ion-select label="Label" label-placement="stacked">
+             <ion-select-option value="apples">Apples</ion-select-option>
+           </ion-select>
+         `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-no-value`));
+      });
+      test('label should appear on top of the select when the select is expanded', async ({ page }) => {
+        await page.setContent(
+          `
+           <ion-select class="select-expanded" label="Label" label-placement="stacked" placeholder="Select a Fruit">
+             <ion-select-option value="apples">Apples</ion-select-option>
+           </ion-select>
+         `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+
+        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-expanded`));
+      });
+      test('long text should truncate', async ({ page }) => {
+        await page.setContent(
+          `
+           <ion-select label="Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label" label-placement="stacked" value="apples" placeholder="Select a Fruit">
+             <ion-select-option value="apples">Apples Apples Apples Apples Apples Apples Apples Apples</ion-select-option>
+           </ion-select>
+         `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+
+        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-long-text`));
+      });
+    });
+  });
+});
+
+/**
+ * By default ion-select takes up the full width
+ * of its container. The justify property can be
+ * used to change the alignment of the select
+ * within the container.
+ */
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: label'), () => {
     test.describe('select: start placement', () => {
       test('should render a start justification with label in the start position', async ({ page }) => {
         await page.setContent(
@@ -224,63 +291,6 @@ configs().forEach(({ title, screenshot, config }) => {
         await expect(select).toHaveScreenshot(screenshot(`select-label-floating-long-text`));
       });
     });
-
-    test.describe('select: stacked placement', () => {
-      test('label should appear above the select when there is a value', async ({ page }) => {
-        await page.setContent(
-          `
-           <ion-select label="Label" value="apples" label-placement="stacked">
-             <ion-select-option value="apples">Apples</ion-select-option>
-           </ion-select>
-         `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-value`));
-      });
-      test('label should appear above the select when there is no value', async ({ page }) => {
-        await page.setContent(
-          `
-           <ion-select label="Label" label-placement="stacked">
-             <ion-select-option value="apples">Apples</ion-select-option>
-           </ion-select>
-         `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-no-value`));
-      });
-      test('label should appear on top of the select when the select is expanded', async ({ page }) => {
-        await page.setContent(
-          `
-           <ion-select class="select-expanded" label="Label" label-placement="stacked" placeholder="Select a Fruit">
-             <ion-select-option value="apples">Apples</ion-select-option>
-           </ion-select>
-         `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-
-        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-expanded`));
-      });
-      test('long text should truncate', async ({ page }) => {
-        await page.setContent(
-          `
-           <ion-select label="Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label" label-placement="stacked" value="apples" placeholder="Select a Fruit">
-             <ion-select-option value="apples">Apples Apples Apples Apples Apples Apples Apples Apples</ion-select-option>
-           </ion-select>
-         `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-
-        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-long-text`));
-      });
-    });
   });
 });
 
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3ab3282cd80
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6bd3d241d86
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4b27f7e52c1
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..51a7bcb6690
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..00e79749bd1
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..68a678fb16c
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f1ba26616db
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7c276d2dce7
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..84322e2868e
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6dd3bb451a8
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bb5eb940acd
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..35d313b3a4f
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..496ca634f12
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d392d08555a
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8fe63aa7595
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7833129e925
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bbfe0e65a52
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3d9bcf288ca
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..60332b6f7d9
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..24529d2a77e
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e2c5af5d569
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3f7421e038c
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c29eebd89aa
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..80dfaa10c32
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3c511786e92
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..36d24087ba9
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8115b13b173
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1da37f87da3
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d6c2b8d619e
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..effeeacdd60
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..480a1486cb8
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ea14caefaff
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5587e01fc1b
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..83d76b87efa
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ab6bed9a33c
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5d1c60ed44d
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/states/index.html b/core/src/components/select/test/states/index.html
index a4c71b368d8..8c7a76db525 100644
--- a/core/src/components/select/test/states/index.html
+++ b/core/src/components/select/test/states/index.html
@@ -19,7 +19,7 @@
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
-      h2 {
+      h3 {
         font-size: 12px;
         font-weight: normal;
 
@@ -49,27 +49,61 @@
       </ion-header>
 
       <ion-content id="content" class="ion-padding">
+        <h2>No Fill</h2>
         <div class="grid">
           <div class="grid-item">
-            <h2>Placeholder</h2>
-            <ion-select label="Favorite Fruit" placeholder="Select a fruit"></ion-select>
+            <h3>Disabled, No Value</h3>
+            <ion-select label="Favorite Fruit" disabled="true"></ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Value</h2>
-            <ion-select label="Favorite Fruit" value="apples">
+            <h3>Disabled, Placeholder</h3>
+            <ion-select label="Favorite Fruit" placeholder="Select a fruit" disabled="true"></ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h3>Disabled, Value</h3>
+            <ion-select label="Favorite Fruit" value="apples" disabled="true">
               <ion-select-option value="apples">Apples</ion-select-option>
             </ion-select>
           </div>
+        </div>
 
+        <h2>Outline</h2>
+        <div class="grid">
           <div class="grid-item">
-            <h2>Disabled, Placeholder</h2>
-            <ion-select label="Favorite Fruit" placeholder="Select a fruit" disabled="true"></ion-select>
+            <h3>Disabled, No Value</h3>
+            <ion-select fill="outline" label="Favorite Fruit" disabled="true"></ion-select>
           </div>
 
           <div class="grid-item">
-            <h2>Disabled, Value</h2>
-            <ion-select label="Favorite Fruit" value="apples" disabled="true">
+            <h3>Disabled, Placeholder</h3>
+            <ion-select fill="outline" label="Favorite Fruit" placeholder="Select a fruit" disabled="true"></ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h3>Disabled, Value</h3>
+            <ion-select fill="outline" label="Favorite Fruit" value="apples" disabled="true">
+              <ion-select-option value="apples">Apples</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+
+        <h2>Solid</h2>
+        <div class="grid">
+          <div class="grid-item">
+            <h3>Disabled, No Value</h3>
+            <ion-select fill="solid" label="Favorite Fruit" disabled="true"></ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h3>Disabled, Placeholder</h3>
+            <ion-select fill="solid" label="Favorite Fruit" placeholder="Select a fruit" disabled="true"></ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h3>Disabled, Value</h3>
+            <ion-select fill="solid" label="Favorite Fruit" value="apples" disabled="true">
               <ion-select-option value="apples">Apples</ion-select-option>
             </ion-select>
           </div>
diff --git a/core/src/components/select/test/states/select.e2e.ts b/core/src/components/select/test/states/select.e2e.ts
index 6cbf1cbae28..2688718afc3 100644
--- a/core/src/components/select/test/states/select.e2e.ts
+++ b/core/src/components/select/test/states/select.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: states'), () => {
     test('should render enabled select with a placeholder correctly', async ({ page }) => {
       await page.setContent(
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1f34cd6696b
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d020efbd8d1
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2ffa69bc7cf
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0ec019c5b28
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bd2491e3cd2
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d824e487845
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..81266c32ead
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..181e1dde03d
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1ae916e52d4
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6df083ee82b
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ad4d9d23f46
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..476344336f3
Binary files /dev/null and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Safari-linux.png differ