diff --git a/src/components/Controls/Base.vue b/src/components/Controls/Base.vue
index 4a7e5f86..07fb6f14 100644
--- a/src/components/Controls/Base.vue
+++ b/src/components/Controls/Base.vue
@@ -27,7 +27,8 @@ export default {
     'placeholder',
     'size',
     'showLabel',
-    'readOnly'
+    'readOnly',
+    'background'
   ],
   inject: {
     doctype: {
@@ -49,7 +50,8 @@ export default {
         this.inputClass,
         {
           'px-3 py-2': this.size !== 'small',
-          'px-2 py-1': this.size === 'small'
+          'px-2 py-1': this.size === 'small',
+          'bg-gray-100': this.background
         },
         'focus:outline-none focus:bg-gray-200 rounded-5px w-full text-gray-900'
       ];
diff --git a/src/pages/Report.vue b/src/pages/Report.vue
index 519fac77..6d2e7718 100644
--- a/src/pages/Report.vue
+++ b/src/pages/Report.vue
@@ -9,8 +9,8 @@
     <div class="mt-6 flex text-base px-8" v-if="report.filterFields">
       <div class="ml-3 first:ml-0 w-32" v-for="df in report.filterFields">
         <FormControl
-          input-class="bg-gray-100"
           size="small"
+          :background="true"
           :df="df"
           :value="filters[df.fieldname]"
           @change="value => onFilterChange(df, value)"