From e283dad25d471f5d56d3a995a3ea28cbdecaf82b Mon Sep 17 00:00:00 2001
From: Ekaterina Berezhko <ekaterina.berezhko@jetbrains.com>
Date: Tue, 28 Jul 2026 12:46:23 +0300
Subject: [PATCH] [IJPL-93391][Markdown] Add custom styling for checkboxes in
 Markdown preview

(cherry picked from commit 69edb34033ce2cce1fade12af6505648c9ea09c0)

IJ-CR-216049

GitOrigin-RevId: 4804f72c238c34d8e6cb15734bd14553c9a8371a
---
 .../extensions/common/baseStyles/default.css  | 21 +++++++++++++++++++
 .../ui/preview/PreviewLAFThemeStyles.kt       | 11 +++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/plugins/markdown/core/resources/org/intellij/plugins/markdown/extensions/common/baseStyles/default.css b/plugins/markdown/core/resources/org/intellij/plugins/markdown/extensions/common/baseStyles/default.css
index 95f57470cec7..20411acade2f 100644
--- a/plugins/markdown/core/resources/org/intellij/plugins/markdown/extensions/common/baseStyles/default.css
+++ b/plugins/markdown/core/resources/org/intellij/plugins/markdown/extensions/common/baseStyles/default.css
@@ -65,8 +65,29 @@ html input[disabled] {
 }
 
 input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
   box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  margin: 0;
   padding: 0;
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  position: relative;
+  vertical-align: middle;
+}
+
+input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 0;
+  width: 4px;
+  height: 8px;
+  border-style: solid;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
 }
 
 body * {
diff --git a/plugins/markdown/core/src/org/intellij/plugins/markdown/ui/preview/PreviewLAFThemeStyles.kt b/plugins/markdown/core/src/org/intellij/plugins/markdown/ui/preview/PreviewLAFThemeStyles.kt
index 7e773481c839..fd7a69f8e1b9 100644
--- a/plugins/markdown/core/src/org/intellij/plugins/markdown/ui/preview/PreviewLAFThemeStyles.kt
+++ b/plugins/markdown/core/src/org/intellij/plugins/markdown/ui/preview/PreviewLAFThemeStyles.kt
@@ -71,7 +71,16 @@ object PreviewLAFThemeStyles {
     .footnotes {
       border-top-color: $separatorColor;
     }
-    
+
+    input[type="checkbox"]:checked {
+      border-color: ${scheme.linkActiveForegroundColor.webRgba()};
+      background-color: ${scheme.linkActiveForegroundColor.webRgba()};
+    }
+
+    input[type="checkbox"]:checked::after {
+      border-color: $backgroundColor;
+    }
+
     blockquote, code, pre {
       background-color: ${scheme.fenceBackgroundColor.webRgba(scheme.fenceBackgroundColor.alpha / 255.0)};
     }