diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index 962339e140aa..18b211ed1e0c 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -924,23 +924,56 @@ table.parameters > tbody:hover {
 
 /* ========================= editable combobox style ========================= */
 .comboBoxList {
-  overflow: visible;
-  background-color: var(--background);
+  overflow-y: scroll;
   color: var(--text-color);
-  border-radius: var(--form-input-border-radius);
-  box-shadow: 0 10px 20px rgba(black, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(black, 0.15);
+  margin-top: 8px;
+  margin-left: 3px;
+  max-height: 300px;
+  z-index: 1000;
+  background: var(--background);
+  padding: 0.3rem;
 }
 
-.comboBoxSelectedItem {
-  background-color: var(--primary);
-  color: var(--background);
+.comboBoxItem {
+  position: relative;
+  padding: 0.5rem 0.8rem;
+  cursor: pointer;
+  font-weight: 500;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: var(--text-color);
+    border-radius: 10px;
+    opacity: 0;
+    transition: var(--standard-transition);
+    z-index: -1;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.1;
+    }
+  }
+
+  &:active,
+  &:focus {
+    &::before {
+      opacity: 0.2;
+    }
+  }
 }
 
 .combobox-values {
   display: none;
 }
 
-
 /* ========================= directory tree ========================= */
 .parentPath {
   font-size: var(--font-size-base);
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index 2369e4b572fd..da818716d167 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -421,27 +421,46 @@
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
 
-  &:focus + label:before, &:active + label:before {
-    border-width: 5px;
-    border-color: var(--focus-input-border);
-    box-shadow: var(--form-input-glow--focus);
-  }
+  &:checked {
+    & + label {
+      &:active,
+      &:focus {
+        &::before {
+          box-shadow: 0 0 0 5px var(--focus-input-glow), inset 0 0 0 12px var(--focus-input-border);
+        }
+      }
+    }
 
-  &:checked + label:before {
-    border: 11px solid var(--focus-input-border);
-  }
+    & + label {
+      &::before {
+        box-shadow: 0 0 0 10px transparent, inset 0 0 0 12px var(--focus-input-border);
+      }
 
-  &:checked + label:after {
-    transform: scale(1)!important;
+      &::after {
+        transform: scale(1);
+      }
+    }
   }
 
   &:disabled {
     & + label {
-      cursor: default;
-      pointer-events: none;
+      cursor: not-allowed;
 
       &::before {
-        opacity: 0.3 !important;
+        opacity: 0.35 !important;
+        box-shadow: 0 0 0 10px transparent, inset 0 0 0 2px var(--input-border) !important;
+      }
+    }
+
+    &:checked {
+      & + label {
+        &::before {
+          box-shadow: 0 0 0 10px transparent, inset 0 0 0 12px var(--focus-input-border) !important;
+        }
+        
+        &::after {
+          transform: scale(1) !important;
+        }
       }
     }
   }
@@ -458,16 +477,15 @@
   font-weight: 600;
 
   &::before {
-    display: inline-block;
     content: "";
+    display: inline-block;
     position: relative;
     min-width: 22px;
     min-height: 22px;
-    border: 2px solid var(--input-border);
     border-radius: 6px;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
     margin-right: 11px;
-    box-shadow: 0 0 0 10px transparent;
+    box-shadow: 0 0 0 10px transparent, inset 0 0 0 2px var(--input-border);
   }
 
   &::after {
@@ -478,7 +496,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    right: 0;
     width: 22px;
     height: 22px;
     background: var(--background);
@@ -486,26 +503,26 @@
     mask-size: 10px 10px;
     mask-repeat: no-repeat;
     mask-position: center;
-    transition: var(--standard-transition);
+    transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);
     transform: scale(0);
   }
 
-  &:hover {
+  &:empty {
     &::before {
-      border: 5px solid var(--input-border-hover);
+      margin-right: 0;
     }
   }
 
-  &:active, &:focus {
+  &:hover {
     &::before {
-      border: 5px solid var(--focus-input-border);
-      box-shadow: 0 0 0 5px var(--focus-input-glow);
+      box-shadow: 0 0 0 10px transparent, inset 0 0 0 5px var(--input-border-hover);
     }
   }
 
-  &:empty {
+  &:active,
+  &:focus {
     &::before {
-      margin-right: 0;
+      box-shadow: 0 0 0 5px var(--focus-input-glow), inset 0 0 0 5px var(--focus-input-border);
     }
   }
 }