diff --git a/src/app/pages/forms/components/inputs/components/selectInputs/index.ts b/src/app/pages/forms/components/inputs/components/selectInputs/index.ts
new file mode 100644
index 00000000..691112b8
--- /dev/null
+++ b/src/app/pages/forms/components/inputs/components/selectInputs/index.ts
@@ -0,0 +1 @@
+export * from './selectInputs.component';
diff --git a/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts b/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts
new file mode 100644
index 00000000..c1758e69
--- /dev/null
+++ b/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'select-inputs',
+  template: require('./selectInputs.html')
+})
+export class SelectInputs {
+  constructor() { }
+}
diff --git a/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.html b/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.html
new file mode 100644
index 00000000..da4e298e
--- /dev/null
+++ b/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.html
@@ -0,0 +1,21 @@
+<div class="form-group">
+  <label for="exampleSelect1">Example select</label>
+  <select class="form-control" id="exampleSelect1">
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+    <option>5</option>
+  </select>
+</div>
+
+<div class="form-group">
+  <label for="exampleSelect2">Example multiple select</label>
+  <select multiple class="form-control" id="exampleSelect2">
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+    <option>5</option>
+  </select>
+</div>
diff --git a/src/app/pages/forms/components/inputs/inputs.html b/src/app/pages/forms/components/inputs/inputs.html
index 96155321..2c157ac3 100644
--- a/src/app/pages/forms/components/inputs/inputs.html
+++ b/src/app/pages/forms/components/inputs/inputs.html
@@ -10,7 +10,11 @@
         <group-inputs></group-inputs>
       </ba-card>
 
+      <ba-card title="Selects" baCardClass="with-scroll">
+        <select-inputs></select-inputs>
+      </ba-card>
     </div>
+
     <div class="col-md-6">
       <ba-card title="Validation States" baCardClass="with-scroll">
         <validation-inputs></validation-inputs>
diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts
index 4463962d..40fe484c 100644
--- a/src/app/pages/forms/forms.module.ts
+++ b/src/app/pages/forms/forms.module.ts
@@ -15,6 +15,7 @@ import { ValidationInputs } from './components/inputs/components/validationInput
 import { GroupInputs } from './components/inputs/components/groupInputs';
 import { CheckboxInputs } from './components/inputs/components/checkboxInputs';
 import { Rating } from './components/inputs/components/ratinginputs';
+import { SelectInputs } from './components/inputs/components/selectInputs';
 
 import { InlineForm } from './components/layouts/components/inlineForm';
 import { BlockForm } from './components/layouts/components/blockForm';
@@ -39,6 +40,7 @@ import { WithoutLabelsForm } from './components/layouts/components/withoutLabels
     GroupInputs,
     CheckboxInputs,
     Rating,
+    SelectInputs,
     InlineForm,
     BlockForm,
     HorizontalForm,
diff --git a/src/app/theme/sass/_form.scss b/src/app/theme/sass/_form.scss
index 5fb2f431..7a289bb4 100644
--- a/src/app/theme/sass/_form.scss
+++ b/src/app/theme/sass/_form.scss
@@ -58,6 +58,14 @@ select.form-control {
   padding-left: 8px;
 }
 
+select.form-control:not([multiple]) option {
+  color: $dropdown-text;
+}
+
+select.form-control[multiple] option {
+  color: $default-text;
+}
+
 textarea.form-control {
   height: 96px;
 }