diff --git a/src/components/input-field/input-field.mdx b/src/components/input-field/input-field.mdx
index b0bb8ee0be..7da0d417c6 100644
--- a/src/components/input-field/input-field.mdx
+++ b/src/components/input-field/input-field.mdx
@@ -8,10 +8,16 @@ menu: Components
 
 <limel-props name="limel-input-field" />
 
+## CSS variables
+
+| Name                          | Description                   |
+| ----------------------------- | ----------------------------- |
+| --background-color            | Background color of the field |
+
 ## Examples
 
 ### Input field of type text
 <limel-example name="limel-example-input-field-text" /> 
 
 ### Input field of type number
-<limel-example name="limel-example-input-field-number" /> 
\ No newline at end of file
+<limel-example name="limel-example-input-field-number" /> 
diff --git a/src/components/input-field/input-field.scss b/src/components/input-field/input-field.scss
index d465f43086..39630741f9 100644
--- a/src/components/input-field/input-field.scss
+++ b/src/components/input-field/input-field.scss
@@ -11,6 +11,10 @@
 
 .mdc-text-field {
     width: 100%;
+
+    .mdc-text-field__input {
+        background-color: var(--background-color, white);
+    }
 }
 
 .mdc-text-field__formatted_input {
@@ -41,16 +45,3 @@
         color: rgba(0, 0, 0, 0.37);
     }
 }
-
-// .mdc-text-field {
-//     &.mdc-text-field--with-trailing-icon {
-//         .mdc-text-field__input {
-//             padding-left: 0;
-//         }
-
-//         .mdc-text-field__icon {
-//             bottom: 0.5rem;
-//             font-style: normal;
-//         }
-//     }
-// }