diff --git a/packages/vibrant-components/src/lib/DateInput/DateInput.tsx b/packages/vibrant-components/src/lib/DateInput/DateInput.tsx
index 8a52f70c4..d6bffdf29 100644
--- a/packages/vibrant-components/src/lib/DateInput/DateInput.tsx
+++ b/packages/vibrant-components/src/lib/DateInput/DateInput.tsx
@@ -73,6 +73,7 @@ export const DateInput = withDateInputVariation(
             justifyContent="center"
             flexGrow={1}
             disabled={disabled}
+            backgroundColor="transparent"
             onClick={onFocus}
             onBlur={() => setIsFocused(false)}
             onFocus={() => {
diff --git a/packages/vibrant-components/src/lib/DatePickerField/__snapshots__/DatePickerField.spec.tsx.snap b/packages/vibrant-components/src/lib/DatePickerField/__snapshots__/DatePickerField.spec.tsx.snap
index 7901a180f..3225e02c6 100644
--- a/packages/vibrant-components/src/lib/DatePickerField/__snapshots__/DatePickerField.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/DatePickerField/__snapshots__/DatePickerField.spec.tsx.snap
@@ -63,7 +63,7 @@ exports[`<DatePickerField /> when size is lg match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  background-color: inherit;
+  background-color: #00000000;
   border-width: 0;
   padding: 0;
   overflow: hidden;
@@ -309,7 +309,7 @@ exports[`<DatePickerField /> when size is md match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  background-color: inherit;
+  background-color: #00000000;
   border-width: 0;
   padding: 0;
   overflow: hidden;
@@ -555,7 +555,7 @@ exports[`<DatePickerField /> when size is sm match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  background-color: inherit;
+  background-color: #00000000;
   border-width: 0;
   padding: 0;
   overflow: hidden;
diff --git a/packages/vibrant-components/src/lib/RangePickerField/__snapshots__/RangePickerField.spec.tsx.snap b/packages/vibrant-components/src/lib/RangePickerField/__snapshots__/RangePickerField.spec.tsx.snap
index 5c5555b2d..d91094f00 100644
--- a/packages/vibrant-components/src/lib/RangePickerField/__snapshots__/RangePickerField.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/RangePickerField/__snapshots__/RangePickerField.spec.tsx.snap
@@ -83,7 +83,7 @@ exports[`<RangePickerField /> when size is lg match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  background-color: inherit;
+  background-color: #00000000;
   border-width: 0;
   padding: 0;
   overflow: hidden;
@@ -349,7 +349,7 @@ exports[`<RangePickerField /> when size is md match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  background-color: inherit;
+  background-color: #00000000;
   border-width: 0;
   padding: 0;
   overflow: hidden;
@@ -615,7 +615,7 @@ exports[`<RangePickerField /> when size is sm match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  background-color: inherit;
+  background-color: #00000000;
   border-width: 0;
   padding: 0;
   overflow: hidden;