diff --git a/src/css/form.css b/src/css/form.css
index b360f258..9d69ba47 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -984,9 +984,9 @@ input[type="range"]:disabled::-moz-range-progress {
   margin: 0;
   position: absolute;
   top: 50%;
-  right: 0.5em;
-  width: 1em;
-  height: 1em;
+  right: 1em;
+  width: calc(var(--form-thumb-size) * 0.8);
+  height: calc(var(--form-thumb-size) * 0.8);
   z-index: 1;
   border-radius: 50%;
   transform: translateY(-50%);
@@ -1010,7 +1010,7 @@ input[type="range"]:disabled::-moz-range-progress {
 }
 
 .input-color-dot input[type="color"]+label {
-  padding-right: 2.25em;
+  padding-right: calc(calc(var(--form-thumb-size) * 0.8) + 2em);
   position: relative;
 }
 
diff --git a/src/style-guide.html b/src/style-guide.html
index 508211bc..95c9895c 100644
--- a/src/style-guide.html
+++ b/src/style-guide.html
@@ -99,9 +99,17 @@
         <label for="style-guide-radio-6"><span class="label-icon"></span> Hidden Radio Button 3</label>
       </div>
     </div>
+    <div class="input-wrap input-button input-hide form-inline">
+      <input id="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
+      <label for="style-guide-input-color-1">Hidden Input Colour Button</label>
+    </div>
     <div class="input-wrap input-button input-color-dot form-inline">
-      <input id="style-guide-input-button-3" type="color" tabindex="1">
-      <label for="style-guide-input-button-3">Input Colour Button</label>
+      <input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
+      <label for="style-guide-input-color-2">Input Colour Button</label>
+    </div>
+    <div class="input-wrap input-button input-color-dot input-color-dot-accent form-inline">
+      <input id="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
+      <label for="style-guide-input-color-3">Input Colour Accent Button</label>
     </div>
     <div class="button-wrap form-inline">
       <div class="form-dropdown form-dropdown-inline">