diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index 3fec762c20..0a1ad815bf 100644
--- a/core/src/components/select/readme.md
+++ b/core/src/components/select/readme.md
@@ -73,6 +73,19 @@ Since select uses the alert, action sheet and popover interfaces, options can be
 | `open` |             |
 
 
+## CSS Custom Properties
+
+| Name                  | Description                          |
+| --------------------- | ------------------------------------ |
+| `--color`             | Color of the select text             |
+| `--icon-color`        | Color of the select icon             |
+| `--padding-bottom`    | Bottom padding of the select         |
+| `--padding-end`       | End padding of the select            |
+| `--padding-start`     | Start padding of the select          |
+| `--padding-top`       | Top padding of the select            |
+| `--placeholder-color` | Color of the select placeholder text |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
index 17a6180eac..e3bf78a956 100644
--- a/core/src/components/select/select.ios.scss
+++ b/core/src/components/select/select.ios.scss
@@ -5,18 +5,21 @@
 // --------------------------------------------------
 
 :host {
+  --color: #{$select-ios-text-color};
+  --icon-color: #{$select-ios-icon-color};
   --padding-top: #{$select-ios-padding-top};
   --padding-end: #{$select-ios-padding-end};
   --padding-bottom: #{$select-ios-padding-bottom};
   --padding-start: #{$select-ios-padding-start};
+  --placeholder-color: #{$select-ios-placeholder-color};
 
-  color: $select-ios-text-color;
+  color: var(--color);
 
   font-family: $select-ios-font-family;
 }
 
 .select-placeholder {
-  color: $select-ios-placeholder-color;
+  color: var(--placeholder-color);
 }
 
 .select-icon {
@@ -39,7 +42,7 @@
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
 
-  color: $select-ios-icon-color;
+  color: var(--icon-color);
   pointer-events: none;
 }
 
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index 19a0b5dd2e..2279db3ef7 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -5,18 +5,21 @@
 // --------------------------------------------------
 
 :host {
+  --color: #{$select-md-text-color};
+  --icon-color: #{$select-md-icon-color};
   --padding-top: #{$select-md-padding-top};
   --padding-end: #{$select-md-padding-end};
   --padding-bottom: #{$select-md-padding-bottom};
   --padding-start: #{$select-md-padding-start};
+  --placeholder-color: #{$select-md-placeholder-color};
 
-  color: $select-md-text-color;
+  color: var(--color);
 
   font-family: $select-md-font-family;
 }
 
 .select-placeholder {
-  color: $select-md-placeholder-color;
+  color: var(--placeholder-color);
 }
 
 .select-md .item-select ion-label {
@@ -43,7 +46,7 @@
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
 
-  color: $select-md-icon-color;
+  color: var(--icon-color);
   pointer-events: none;
 }
 
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index 031975deeb..83e98b3c24 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -4,6 +4,16 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --color: Color of the select text
+   * @prop --icon-color: Color of the select icon
+   * @prop --padding-top: Top padding of the select
+   * @prop --padding-end: End padding of the select
+   * @prop --padding-bottom: Bottom padding of the select
+   * @prop --padding-start: Start padding of the select
+   * @prop --placeholder-color: Color of the select placeholder text
+   */
+
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
   display: flex;
diff --git a/core/src/components/select/test/standalone/index.html b/core/src/components/select/test/standalone/index.html
index db01beecb7..5235e2de2e 100644
--- a/core/src/components/select/test/standalone/index.html
+++ b/core/src/components/select/test/standalone/index.html
@@ -59,5 +59,23 @@
     <ion-select-option>1998</ion-select-option>
     <ion-select-option>1999</ion-select-option>
   </ion-select>
+
+  <ion-select class="custom" placeholder="Day">
+    <ion-select-option>Sunday</ion-select-option>
+    <ion-select-option>Monday</ion-select-option>
+    <ion-select-option>Tuesday</ion-select-option>
+    <ion-select-option>Wednesday</ion-select-option>
+    <ion-select-option>Thursday</ion-select-option>
+    <ion-select-option>Friday</ion-select-option>
+    <ion-select-option>Saturday</ion-select-option>
+  </ion-select>
+
+  <style>
+    .custom {
+      --color: crimson;
+      --icon-color: pink;
+      --placeholder-color: teal;
+    }
+  </style>
 </body>
 </html>