diff --git a/src/defaultOptions.js b/src/defaultOptions.js
index bfb60c9..f93bcd3 100644
--- a/src/defaultOptions.js
+++ b/src/defaultOptions.js
@@ -22,6 +22,12 @@ module.exports = {
       boxShadow: defaultTheme.boxShadow.outline,
       borderColor: defaultTheme.colors.blue[400],
     },
+    '&:disabled': {
+      backgroundColor: defaultTheme.colors.gray[100]
+    },
+    '&[readonly]': {
+      backgroundColor: defaultTheme.colors.gray[100]
+    }
   },
   textarea: {
     appearance: 'none',
@@ -44,6 +50,12 @@ module.exports = {
       boxShadow: defaultTheme.boxShadow.outline,
       borderColor: defaultTheme.colors.blue[400],
     },
+    '&:disabled': {
+      backgroundColor: defaultTheme.colors.gray[100]
+    },
+    '&[readonly]': {
+      backgroundColor: defaultTheme.colors.gray[100]
+    },
   },
   multiselect: {
     appearance: 'none',
@@ -62,6 +74,9 @@ module.exports = {
       boxShadow: defaultTheme.boxShadow.outline,
       borderColor: defaultTheme.colors.blue[400],
     },
+    '&:disabled': {
+      backgroundColor: defaultTheme.colors.gray[100]
+    }
   },
   select: {
     appearance: 'none',
@@ -92,6 +107,9 @@ module.exports = {
       boxShadow: defaultTheme.boxShadow.outline,
       borderColor: defaultTheme.colors.blue[400],
     },
+    '&:disabled': {
+      backgroundColor: defaultTheme.colors.gray[100]
+    }
   },
   checkbox: {
     appearance: 'none',
@@ -130,6 +148,15 @@ module.exports = {
       backgroundPosition: 'center',
       backgroundRepeat: 'no-repeat',
     },
+    '&:disabled': {
+      backgroundColor: defaultTheme.colors.gray[100],
+    },
+    '&:disabled + *': {
+      color: defaultTheme.colors.gray[600],
+    },
+    '&:disabled:checked': {
+      backgroundColor: defaultTheme.colors.gray[500],
+    },
   },
   radio: {
     appearance: 'none',
@@ -168,5 +195,14 @@ module.exports = {
       backgroundPosition: 'center',
       backgroundRepeat: 'no-repeat',
     },
+    '&:disabled': {
+      backgroundColor: defaultTheme.colors.gray[100],
+    },
+    '&:disabled + *': {
+      color: defaultTheme.colors.gray[600],
+    },
+    '&:disabled:checked': {
+      backgroundColor: defaultTheme.colors.gray[500],
+    },
   }
 }