src/main/resources/static/css/theme/componentes.css

@@ -792,6 +792,23 @@ textarea.form-control {
   box-shadow: 0 0 0 0.25rem var(--md-sys-color-outline-variant);
 }
 
+.form-control-color {
+  padding: 0;
+  height: 2.4rem;
+  width: 2.4rem;
+}
+
+.form-control input[type="color"] {
+  opacity: 0;
+  height: 2.4rem;
+  width: 2.4rem;
+  box-sizing: border-box;
+ }
+
+ .form-control input[type="color"]:hover{
+   cursor: pointer;
+ }
+
 /* Navbar Components */
 .navbar-brand {
   color: var(--md-sys-color-on-surface) !important;
@@ -916,4 +933,4 @@ textarea.form-control {
   color: var(--md-sys-color-on-error-container);
   background-color: var(--md-sys-color-error-container);
   border-color: transparent;
-}
+}

src/main/resources/templates/misc/stamp.html

@@ -119,7 +119,22 @@
 
                 <div class="mb-3">
                   <label for="customColor" class="form-label" th:text="#{AddStampRequest.customColor}">Custom Color</label>
-                  <input type="color" class="form-control form-control-color" id="customColor" name="customColor" value="#d3d3d3">
+                  <div class="form-control form-control-color" style="background-color: #d3d3d3;">
+                    <input type="color" id="customColor" name="customColor" value="#d3d3d3">
+                  </div>
+                  <script>
+                    let colorInput = document.getElementById("customColor");
+                    if (colorInput) {
+                      let colorInputContainer = colorInput.parentElement;
+                      if (colorInputContainer) {
+                        colorInput.onchange = function() {
+                          colorInputContainer.style.backgroundColor = colorInput.value;
+                        }
+                        colorInputContainer.style.backgroundColor = colorInput.value;
+                      }
+                    }
+
+                  </script>
                 </div>
 
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{AddStampRequest.submit}"></button>