diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/DatePickerPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/DatePickerPage.java
index 1920900..44c4d6d 100644
--- a/sampler/src/main/java/atlantafx/sampler/page/components/DatePickerPage.java
+++ b/sampler/src/main/java/atlantafx/sampler/page/components/DatePickerPage.java
@@ -43,6 +43,7 @@ public class DatePickerPage extends OutlinePage {
         var today = LocalDate.now(ZoneId.systemDefault());
 
         var dp1 = new DatePicker(today);
+        dp1.setEditable(false);
         dp1.setPrefWidth(200);
 
         var dp2 = new DatePicker(today.plusDays(10));
diff --git a/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/widgets/_contrast-checker.scss b/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/widgets/_contrast-checker.scss
index af9a924..4c52c0b 100644
--- a/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/widgets/_contrast-checker.scss
+++ b/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/widgets/_contrast-checker.scss
@@ -16,6 +16,7 @@
     -color-input-bg:             transparent;
     -color-input-fg:             -color-contrast-checker-fg;
     -color-input-border:         transparent;
+    -color-input-bg-readonly:    transparent;
     -color-input-bg-focused:     transparent;
     -color-input-border-focused: transparent;
 
diff --git a/styles/src/components/_date-picker.scss b/styles/src/components/_date-picker.scss
index 5340b20..cfc7060 100755
--- a/styles/src/components/_date-picker.scss
+++ b/styles/src/components/_date-picker.scss
@@ -69,6 +69,16 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
       -fx-padding: 0.416667em; // icon size
     }
   }
+
+  >.text-field {
+    &:readonly {
+      -fx-background-color: -color-input-border, -color-input-bg;
+    }
+
+    &:readonly:focused {
+      -fx-background-color: -color-input-border-focused, -color-input-bg-focused;
+    }
+  }
 }
 
 .combo-box-popup>.date-picker-popup {
diff --git a/styles/src/components/_spinner.scss b/styles/src/components/_spinner.scss
index 5992fab..144bc45 100755
--- a/styles/src/components/_spinner.scss
+++ b/styles/src/components/_spinner.scss
@@ -22,6 +22,14 @@ $icon-padding-x:     0.25em !default;
                  calc(cfg.$padding-x - cfg.$border-width)
                  calc(cfg.$padding-y - cfg.$border-width)
                  calc(cfg.$padding-x - cfg.$border-width);
+
+    &:readonly {
+      -fx-background-color: -color-input-border, -color-input-bg;
+    }
+
+    &:readonly:focused {
+      -fx-background-color: -color-input-border-focused, -color-input-bg-focused;
+    }
   }
 
   >.increment-arrow-button {
diff --git a/styles/src/components/_text-input.scss b/styles/src/components/_text-input.scss
index 0db9289..4aa7217 100755
--- a/styles/src/components/_text-input.scss
+++ b/styles/src/components/_text-input.scss
@@ -9,6 +9,7 @@ $color-border: -color-border-default !default;
 $color-bg-focused: -color-bg-default !default;
 $color-border-focused: -color-accent-emphasis !default;
 
+$color-bg-readonly:  -color-bg-subtle  !default;
 $color-bg-highlight: -color-accent-subtle !default;
 $color-fg-highlight: -color-fg-default !default;
 
@@ -33,6 +34,7 @@ $color-fg-password: -color-fg-muted !default;
   -color-input-bg-focused: $color-bg-focused;
   -color-input-border-focused: $color-border-focused;
 
+  -color-input-bg-readonly:  $color-bg-readonly;
   -color-input-bg-highlight: $color-bg-highlight;
   -color-input-fg-highlight: $color-fg-highlight;
 
@@ -76,6 +78,14 @@ $color-fg-password: -color-fg-muted !default;
     -color-input-border-focused: $color-border-danger;
   }
 
+  &:readonly {
+    -fx-background-color: -color-input-border, -color-input-bg-readonly;
+  }
+
+  &:readonly:focused {
+    -fx-background-color: -color-input-border-focused, -color-input-bg-readonly;
+  }
+
   // input group
   &.left-pill {
     -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;