diff --git a/core/src/components/select/select.ionic.outline.scss b/core/src/components/select/select.ionic.outline.scss
index 77427dd283..1acffced40 100644
--- a/core/src/components/select/select.ionic.outline.scss
+++ b/core/src/components/select/select.ionic.outline.scss
@@ -50,3 +50,23 @@
box-sizing: border-box;
}
+
+// Focus
+// ---------------------------------------------
+
+:host(.ion-focused.select-fill-outline) {
+ --border-color: var(--highlight-color);
+}
+
+:host(.ion-focused.select-fill-outline:not(.ion-invalid):not(.ion-valid)) {
+ --border-width: #{globals.$ion-border-size-050};
+}
+
+/**
+ * If the select has a validity state, the
+ * border should reflect that as a color.
+ */
+:host(.has-focus.select-fill-outline.ion-valid),
+:host(.select-fill-outline.ion-touched.ion-invalid) {
+ --border-color: var(--highlight-color);
+}
diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss
index f134779d58..b642c4be4c 100644
--- a/core/src/components/select/select.ionic.scss
+++ b/core/src/components/select/select.ionic.scss
@@ -9,7 +9,7 @@
--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-color: #{globals.$ion-primitives-neutral-500};
--border-width: #{globals.$ion-border-size-025};
--padding-start: #{globals.$ion-space-400};
--padding-end: #{globals.$ion-space-400};
@@ -17,6 +17,9 @@
--padding-bottom: #{globals.$ion-space-300};
--placeholder-color: #{globals.$ion-primitives-neutral-800};
--placeholder-opacity: 1;
+ --highlight-color-focused: #{globals.$ion-border-focus-default};
+ --highlight-color-valid: #{globals.$ion-semantics-success-900};
+ --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
}
// Select Label
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
index fafefce159..c8d425c638 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png 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
index b4c35809de..d215e6232a 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png 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
index da272e1149..268fecb9a6 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png 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
index 9e0822760d..c8b66ec4a8 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png 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
index 9e853c870a..a77a4ea851 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png 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
index 6a5a85d69a..7d89db0f92 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png 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
index 388d539e25..5b2b91631e 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png 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
index 52d87bb845..cb64d83d4a 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png 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
index 998b85533d..a9acbf2818 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png 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
index ca20cc597c..2f766a4d45 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png 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
index b754a973fb..df6368922a 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png 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
index 1dea4f4eda..23766d2b89 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png 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/highlight/select.e2e.ts b/core/src/components/select/test/highlight/select.e2e.ts
index 23fd444c56..54f9f7a4ee 100644
--- a/core/src/components/select/test/highlight/select.e2e.ts
+++ b/core/src/components/select/test/highlight/select.e2e.ts
@@ -149,6 +149,53 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
await expect(container).toHaveScreenshot(screenshot(`select-solid-custom-highlight`));
});
});
+ });
+
+ test.describe(title('select: expanded highlight'), () => {
+ test.describe('select: no fill', () => {
+ test('should render bottom highlight', async ({ page }) => {
+ await page.setContent(
+ `
+
+ `,
+ config
+ );
+
+ const select = page.locator('ion-select');
+ await expect(select).toHaveScreenshot(screenshot(`select-no-fill-highlight`));
+ });
+ });
+ test.describe('select: solid', () => {
+ test('should render bottom highlight', async ({ page }) => {
+ await page.setContent(
+ `
+
+ `,
+ config
+ );
+
+ const select = page.locator('ion-select');
+ await expect(select).toHaveScreenshot(screenshot(`select-solid-highlight`));
+ });
+ });
+ test.describe('select: outline', () => {
+ test('should render bottom highlight', async ({ page }) => {
+ await page.setContent(
+ `
+
+ `,
+ config
+ );
+
+ const select = page.locator('ion-select');
+ await expect(select).toHaveScreenshot(screenshot(`select-outline-highlight`));
+ });
+ });
+ });
+});
+
+configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('select: highlights'), () => {
test.describe('select: outline', () => {
test('should render valid state correctly', async ({ page }) => {
await page.setContent(
@@ -223,46 +270,4 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
});
});
});
-
- test.describe(title('select: expanded highlight'), () => {
- test.describe('select: no fill', () => {
- test('should render bottom highlight', async ({ page }) => {
- await page.setContent(
- `
-
- `,
- config
- );
-
- const select = page.locator('ion-select');
- await expect(select).toHaveScreenshot(screenshot(`select-no-fill-highlight`));
- });
- });
- test.describe('select: solid', () => {
- test('should render bottom highlight', async ({ page }) => {
- await page.setContent(
- `
-
- `,
- config
- );
-
- const select = page.locator('ion-select');
- await expect(select).toHaveScreenshot(screenshot(`select-solid-highlight`));
- });
- });
- test.describe('select: outline', () => {
- test('should render bottom highlight', async ({ page }) => {
- await page.setContent(
- `
-
- `,
- config
- );
-
- const select = page.locator('ion-select');
- await expect(select).toHaveScreenshot(screenshot(`select-outline-highlight`));
- });
- });
- });
});
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..42f70dff68
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c5a10e5a10
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5b905f20a5
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..720fa89223
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e06f2e7bc6
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ddc0003b3e
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b3237ff918
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..14deb4c100
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..de5e0dd7fc
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e309a6b52d
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..aaf17bf814
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1bcc8bf6b2
Binary files /dev/null and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 14a2ca781f..abf9b0ba1f 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 61c78a6965..e5e00b7785 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 16316cfa4e..7c1e95a7ae 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d54b4a0e56..45c8fad9b9 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b3bc4ab892..61042adae9 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index cb366520a5..0289443980 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2a35ecc985..1d9694d954 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6b00a2ee32..76c614f2d7 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index eb4dbdb530..d82f8ad6f0 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 584742e70e..7abb5d4d1d 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2963b8e10a..68d55adc50 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index 659146dc81..a663268581 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d54b4a0e56..45c8fad9b9 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b3bc4ab892..61042adae9 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
index cb366520a5..0289443980 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2eda2268a1..1f9165db20 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 44a970bdcc..c1581bf0fa 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index a06bd13e8b..a80ab3e68c 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ