diff --git a/core/src/components/select/select.ionic.outline.scss b/core/src/components/select/select.ionic.outline.scss
index 77427dd2838..1acffced406 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 f134779d581..b642c4be4c4 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 fafefce159d..c8d425c638b 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 b4c35809deb..d215e6232aa 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 da272e11499..268fecb9a6d 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 9e0822760d2..c8b66ec4a8a 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 9e853c870a6..a77a4ea8512 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 6a5a85d69aa..7d89db0f927 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 388d539e259..5b2b91631ea 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 52d87bb845b..cb64d83d4ae 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 998b85533d3..a9acbf2818e 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 ca20cc597c1..2f766a4d458 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 b754a973fbf..df6368922a7 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 1dea4f4eda8..23766d2b897 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 23fd444c56d..54f9f7a4ee1 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 00000000000..42f70dff683
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 00000000000..c5a10e5a103
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 00000000000..5b905f20a5a
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 00000000000..720fa892235
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 00000000000..e06f2e7bc66
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 00000000000..ddc0003b3e6
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 00000000000..b3237ff9181
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 00000000000..14deb4c1008
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 00000000000..de5e0dd7fc0
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 00000000000..e309a6b52da
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 00000000000..aaf17bf8148
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 00000000000..1bcc8bf6b22
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 14a2ca781ff..abf9b0ba1fb 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 61c78a69650..e5e00b7785e 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 16316cfa4e0..7c1e95a7aec 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 d54b4a0e565..45c8fad9b96 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 b3bc4ab892c..61042adae98 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 cb366520a51..02894439804 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 2a35ecc9852..1d9694d9548 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 6b00a2ee323..76c614f2d75 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 eb4dbdb530b..d82f8ad6f08 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 584742e70e9..7abb5d4d1da 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 2963b8e10a8..68d55adc50f 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 659146dc810..a663268581e 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 d54b4a0e565..45c8fad9b96 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 b3bc4ab892c..61042adae98 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 cb366520a51..02894439804 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 2eda2268a1e..1f9165db202 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 44a970bdcc3..c1581bf0fa4 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 a06bd13e8b8..a80ab3e68ce 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