From 1ea11b6434ddff1efed0ace84ee5b7593f436dd6 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Thu, 16 Jul 2026 15:58:54 +0800
Subject: [PATCH] =?UTF-8?q?style(checkbox):=20=E6=96=87=E7=AB=A0=E9=A1=B5?=
 =?UTF-8?q?=20task-list=20checkbox=20=E6=94=B9=E7=94=A8=20appearance:none?=
 =?UTF-8?q?=20=E8=87=AA=E7=BB=98=E5=9C=86=E8=A7=92=E6=96=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原生 checkbox 形状随浏览器而异(Safari 圆角小框/Chrome 直角),
accent-color 只能上色无法统一形状。改为全自定义:
- appearance:none + 4px 圆角 + 1.15rem 方框
- 勾选时 accent 绿填充,对勾用内联 SVG background
  (<input> 是替换元素,吃不到伪元素)
- 亮色:中绿底 #40a02b + 白对勾(对比 ≥4.5:1)
- 暗色:浅绿底 #a6e3a1 + 深对勾 #1e1e2e(白对勾在浅绿上对比不足)
- 文章内 checkbox 是 disabled 展示态,故不加 focus/cursor 交互
---
 input.css | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/input.css b/input.css
index fd59a4a..89c2f39 100644
--- a/input.css
+++ b/input.css
@@ -405,12 +405,36 @@
   }
 
   .md-content li > input[type="checkbox"] {
+    /* appearance:none 全自定义：告别浏览器原生方框形状/边框差异。
+       对勾用内联 SVG background（<input> 是替换元素，吃不到 ::after），
+       颜色按主题烘焙——亮色中绿底配白对勾，暗色浅绿底配深对勾，对比最强。
+       文章内 checkbox 是 disabled 的纯展示态，故不加 focus/cursor 交互。 */
+    appearance: none;
+    -webkit-appearance: none;
     flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
+    width: 1.15rem;
+    height: 1.15rem;
     margin: 0;
-    accent-color: var(--color-paper-accent);
+    border: 1.5px solid var(--color-paper-border);
+    border-radius: 4px;
+    background-color: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 0.75rem;
     cursor: default;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+  }
+
+  .md-content li > input[type="checkbox"]:checked {
+    background-color: var(--color-paper-accent);
+    border-color: var(--color-paper-accent);
+    /* 亮色：中绿 #40a02b 底 + 白对勾（对比 ≥ 4.5:1） */
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%208.5l3%203%206-6.5'/%3E%3C/svg%3E");
+  }
+
+  /* 暗色：浅绿 #a6e3a1 底上白对勾对比不足，改深色对勾（主题底色 #1e1e2e） */
+  .dark .md-content li > input[type="checkbox"]:checked {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%231e1e2e'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%208.5l3%203%206-6.5'/%3E%3C/svg%3E");
   }
 
   .md-content hr {