diff --git a/docs/select.stories.js b/docs/select.stories.js
new file mode 100644
index 0000000..7ed10b6
--- /dev/null
+++ b/docs/select.stories.js
@@ -0,0 +1,26 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+ withKnobs, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Select', module);
+stories.addDecorator(withKnobs);
+
+stories.add('select', () => {
+ const selectedClass = radios('class', {
+ default: '',
+ 'is-success': 'is-success',
+ 'is-warning': 'is-warning',
+ 'is-error': 'is-error',
+ }, '');
+
+ return `
+
+
+
+ `;
+});
diff --git a/scss/form/_index.scss b/scss/form/_index.scss
index b38295f..70c4e1f 100644
--- a/scss/form/_index.scss
+++ b/scss/form/_index.scss
@@ -1,3 +1,4 @@
@charset "utf-8";
@import "inputs.scss";
+@import "select.scss";
diff --git a/scss/form/select.scss b/scss/form/select.scss
new file mode 100644
index 0000000..ab2ca2e
--- /dev/null
+++ b/scss/form/select.scss
@@ -0,0 +1,43 @@
+.nes-select {
+ // prettier-ignore
+ $dropdown: (
+ (1,1,1,1,1,1,1),
+ (1,1,1,1,1,1,1),
+ (0,1,1,1,1,1,0),
+ (0,1,1,1,1,1,0),
+ (0,0,1,1,1,0,0),
+ (0,0,0,1,0,0,0),
+ );
+ $colors: ($base-color, map-get($default-colors, "shadow"));
+
+ position: relative;
+ width: 100%;
+
+ select {
+ width: 100%;
+ padding: 0.5rem 1rem;
+ -webkit-appearance: none;
+ appearance: none;
+ cursor: $cursor-click-url, pointer;
+ border: none;
+ border-radius: 0;
+ box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529;
+
+ &:invalid {
+ color: $color-00;
+ }
+ }
+
+ &::after {
+ @include pixelize($dropdown, $colors);
+
+ position: absolute;
+ top: calc(50% - 11px);
+ right: 36px;
+ width: 2px;
+ height: 2px;
+ font-size: 2px;
+ content: "";
+ transform: scale(1.5);
+ }
+}