diff --git a/web_src/css/base.css b/web_src/css/base.css
index 0d6c4a2f75..2c7bd7395a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -15,8 +15,8 @@
   /* line-height: use the default value as "modules/normalize.css" */
   --line-height-default: normal;
   /* images */
-  --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
-  --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
+  --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9"><path fill-rule="evenodd" d="M11.78.22a.75.75 0 0 1 0 1.061L4.52 8.541a.75.75 0 0 1-1.062 0L.202 5.285a.75.75 0 0 1 1.061-1.061l2.725 2.723L10.718.22a.75.75 0 0 1 1.062 0"/></svg>');
+  --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2"><path fill-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>');
   --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
   --select-arrows: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427m0-1.957L7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426"/></svg>');
   /* other variables */
@@ -27,7 +27,7 @@
   --height-loading: 16rem;
   --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
   --tab-size: 4;
-  --checkbox-size: 15px; /* height and width of checkbox and radio inputs */
+  --checkbox-size: 14px; /* height and width of checkbox and radio inputs */
   --page-spacing: 16px; /* space between page elements */
   --page-margin-x: 32px; /* minimum space on left and right side of page */
   --page-space-bottom: 64px; /* space between last page element and footer */
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index 047b03fa19..6ca6f95c69 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -164,12 +164,16 @@ In markup content, we always use bottom margin for all elements */
   list-style-type: none;
 }
 
+.markup .task-list-item > ul {
+  margin-top: 4px;
+}
+
 .markup .task-list-item p + ul {
   margin-top: 16px;
 }
 
 .markup .task-list-item input[type="checkbox"] {
-  margin: 0 .3em .25em -1.4em;
+  margin: 0 .6em .25em -1.4em;
   vertical-align: middle;
   padding: 0;
 }
@@ -188,48 +192,12 @@ In markup content, we always use bottom margin for all elements */
 }
 
 .markup input[type="checkbox"] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  position: relative;
-  border: 1px solid var(--color-secondary);
-  border-radius: var(--border-radius);
-  background: var(--color-input-background);
-  height: 14px;
-  width: 14px;
+  margin-right: .25em;
+  margin-bottom: .25em;
+  cursor: default;
   opacity: 1 !important; /* override fomantic on edit preview */
   pointer-events: auto !important; /* override fomantic on edit preview */
   vertical-align: middle !important; /* override fomantic on edit preview */
-  -webkit-print-color-adjust: exact;
-  color-adjust: exact;
-}
-
-.markup input[type="checkbox"]:not([disabled]):hover,
-.markup input[type="checkbox"]:not([disabled]):active {
-  border-color: var(--color-primary);
-}
-
-.markup input[type="checkbox"]::after {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: var(--color-text);
-  mask-size: cover;
-  -webkit-mask-size: cover;
-}
-
-.markup input[type="checkbox"]:checked::after {
-  content: "";
-  mask-image: var(--checkbox-mask-checked);
-  -webkit-mask-image: var(--checkbox-mask-checked);
-  -webkit-print-color-adjust: exact;
-  color-adjust: exact;
-}
-
-.markup input[type="checkbox"]:indeterminate::after {
-  content: "";
-  mask-image: var(--checkbox-mask-indeterminate);
-  -webkit-mask-image: var(--checkbox-mask-indeterminate);
 }
 
 .markup ul ul,
diff --git a/web_src/css/modules/checkbox.css b/web_src/css/modules/checkbox.css
index f7e61ba360..558486e63a 100644
--- a/web_src/css/modules/checkbox.css
+++ b/web_src/css/modules/checkbox.css
@@ -1,10 +1,75 @@
 /* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
    unused rules here after refactoring, please remove them. */
 
-input[type="checkbox"],
 input[type="radio"] {
+  appearance: none;
   width: var(--checkbox-size);
   height: var(--checkbox-size);
+  border: 1px solid var(--color-input-border);
+  border-radius: 50%;
+  background: var(--color-input-background);
+}
+
+input[type="radio"]:checked {
+  background: var(--color-white);
+  border: 4px solid var(--color-primary);
+}
+
+input[type="checkbox"] {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border: 1px solid var(--color-input-border);
+  border-radius: 3px;
+  background: var(--color-input-background);
+  overflow: hidden;
+  print-color-adjust: exact;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  background: var(--color-white);
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  clip-path: inset(var(--checkbox-size) 0 0 0);
+  mask-image: var(--checkbox-mask-checked);
+  -webkit-mask-image: var(--checkbox-mask-checked);
+  mask-size: 75%;
+  -webkit-mask-size: 75%;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+}
+
+input[type="checkbox"]:checked,
+input[type="checkbox"]:indeterminate {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+input[type="checkbox"]:checked::before {
+  clip-path: inset(0);
+}
+
+input[type="checkbox"]:disabled:checked,
+input[type="checkbox"]:disabled:indeterminate {
+  background: var(--color-secondary-dark-4);
+  border-color: var(--color-secondary-dark-4);
+}
+
+input[type="radio"]:disabled:checked {
+  border-color: var(--color-secondary-dark-4);
+}
+
+input[type="checkbox"]:indeterminate::before {
+  clip-path: inset(0);
+  mask-image: var(--checkbox-mask-indeterminate);
+  -webkit-mask-image: var(--checkbox-mask-indeterminate);
+  mask-size: 75%;
+  -webkit-mask-size: 75%;
 }
 
 .ui.checkbox {
diff --git a/web_src/css/modules/dropdown.css b/web_src/css/modules/dropdown.css
index 2008ece2ed..1c6e7f8552 100644
--- a/web_src/css/modules/dropdown.css
+++ b/web_src/css/modules/dropdown.css
@@ -268,7 +268,6 @@ select.ui.dropdown {
 }
 
 .ui.selection.dropdown:hover {
-  border-color: var(--color-input-border-hover);
   box-shadow: none;
 }
 
diff --git a/web_src/css/modules/form.css b/web_src/css/modules/form.css
index 56d4f9ba61..2d315786c6 100644
--- a/web_src/css/modules/form.css
+++ b/web_src/css/modules/form.css
@@ -43,7 +43,7 @@
   height: 1.21428571em;
 }
 
-.ui.form input,
+.ui.form input:not([type="checkbox"], [type="radio"]),
 .ui.search > .prompt {
   font-family: var(--fonts-regular);
   margin: 0;
@@ -74,10 +74,10 @@
   max-height: 24em;
 }
 
-input,
+input:not([type="checkbox"], [type="radio"]),
 textarea,
 .ui.input > input,
-.ui.form input,
+.ui.form input:not([type="checkbox"], [type="radio"]),
 .ui.form select,
 .ui.form textarea,
 .ui.selection.dropdown,
@@ -87,22 +87,10 @@ textarea,
   color: var(--color-input-text);
 }
 
-input:hover,
-textarea:hover,
-.ui.input input:hover,
-.ui.form input:hover,
-.ui.form select:hover,
-.ui.form textarea:hover,
-.ui.search > .prompt:hover {
-  background: var(--color-input-background);
-  border: 1px solid var(--color-input-border-hover);
-  color: var(--color-input-text);
-}
-
-input:focus,
+input:not([type="checkbox"], [type="radio"]):focus,
 textarea:focus,
 .ui.input input:focus,
-.ui.form input:focus,
+.ui.form input:not([type="checkbox"], [type="radio"]):focus,
 .ui.form select:focus,
 .ui.form textarea:focus,
 .ui.search > .prompt:focus {
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index ad5eec9e82..f347589509 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -205,8 +205,7 @@ gitea-theme-meta-info {
   --color-input-text: var(--color-text-dark);
   --color-input-background: #171a1e;
   --color-input-toggle-background: #2e353c;
-  --color-input-border: var(--color-secondary);
-  --color-input-border-hover: var(--color-secondary-dark-1);
+  --color-input-border: var(--color-secondary-dark-1);
   --color-light: #00001728;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #e8f3ff28;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 049b64f73f..dc916f002d 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -205,8 +205,7 @@ gitea-theme-meta-info {
   --color-input-text: var(--color-text-dark);
   --color-input-background: #fff;
   --color-input-toggle-background: #d0d7de;
-  --color-input-border: var(--color-secondary);
-  --color-input-border-hover: var(--color-secondary-dark-1);
+  --color-input-border: var(--color-secondary-dark-1);
   --color-light: #00001706;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #0000171d;