diff --git a/src/lib/plugins/value/components/BooleanToggle.scss b/src/lib/plugins/value/components/BooleanToggle.scss
index de9e7abc..9a4832fd 100644
--- a/src/lib/plugins/value/components/BooleanToggle.scss
+++ b/src/lib/plugins/value/components/BooleanToggle.scss
@@ -7,3 +7,7 @@
   padding-top: 1px;
   height: var(--jse-line-height);
 }
+
+.jse-boolean-toggle:not(.jse-readonly) {
+  cursor: pointer;
+}
diff --git a/src/lib/plugins/value/components/BooleanToggle.svelte b/src/lib/plugins/value/components/BooleanToggle.svelte
index 8024aa72..b046f87c 100644
--- a/src/lib/plugins/value/components/BooleanToggle.svelte
+++ b/src/lib/plugins/value/components/BooleanToggle.svelte
@@ -34,6 +34,7 @@
 
 <div
   class="jse-boolean-toggle"
+  class:jse-readonly={readOnly}
   on:mousedown={toggleBooleanValue}
   title={!readOnly ? 'Click to toggle this boolean value' : `Boolean value ${value}`}
 >
diff --git a/src/lib/plugins/value/components/ColorPicker.scss b/src/lib/plugins/value/components/ColorPicker.scss
index bcb521c2..b6d34504 100644
--- a/src/lib/plugins/value/components/ColorPicker.scss
+++ b/src/lib/plugins/value/components/ColorPicker.scss
@@ -14,5 +14,8 @@
   border-radius: 2px;
   background: inherit;
   outline: none;
+}
+
+.jse-color-picker-button:not(.jse-readonly) {
   cursor: pointer;
 }
diff --git a/src/lib/plugins/value/components/ColorPicker.svelte b/src/lib/plugins/value/components/ColorPicker.svelte
index 9a4cb681..602e7bd1 100644
--- a/src/lib/plugins/value/components/ColorPicker.svelte
+++ b/src/lib/plugins/value/components/ColorPicker.svelte
@@ -69,6 +69,7 @@
 <button
   type="button"
   class="jse-color-picker-button"
+  class:jse-readonly={readOnly}
   style="background: {color}"
   title={!readOnly ? 'Click to open a color picker' : `Color ${value}`}
   on:click={openColorPicker}