Update src/display/css_html_js.py

src/display/css_html_js.py

@@ -94,7 +94,7 @@ custom_css = """
 #box-filter > .form{
     border: 0
 }
-/* 隐藏默认复选框 */
+/* 隐藏默认样式的复选框 */
 .gr_checkbox input[type="checkbox"] {
     display: none; /* 隐藏默认勾选框 */
 }
@@ -103,18 +103,41 @@ custom_css = """
 .gr_checkbox label {
     display: inline-block;
     padding: 10px;
-    cursor: pointer; /* 鼠标悬停时显示手型光标 */
+    border: 2px solid blue; /* 可选的边框颜色 */
+    border-radius: 5px; /* 圆角 */
+    cursor: pointer; /* 光标样式 */
 }
 
 /* 自定义复选框的选中状态 */
 .gr_checkbox input[type="checkbox"]:checked + label {
-    background-color: blue; /* 选中时的背景颜色为蓝色 */
-    color: white; /* 选中时的文字颜色 */
+    background-color: blue; /* 选中时背景颜色为蓝色 */
+    color: white; /* 选中时文字颜色为白色 */
 }
 
-/* 自定义复选框内的选中标识颜色 */
+/* 显示复选框的勾选标志 */
+.gr_checkbox label::before {
+    content: ""; /* 提供空内容 */
+    display: inline-block;
+    width: 20px;  /* 控制复选框的宽度 */
+    height: 20px; /* 控制复选框的高度 */
+    margin-right: 10px; /* 复选框和文字之间的间距 */
+    border: 2px solid blue; /* 自定义复选框的边框颜色 */
+    border-radius: 3px; /* 圆角 */
+    background-color: transparent; /* 默认背景色 */
+}
+
+/* 当复选框选中时，显示蓝色背景和勾号 */
 .gr_checkbox input[type="checkbox"]:checked + label::before {
-    background-color: blue; /* 勾选框内的颜色为蓝色 */
+    background-color: blue; /* 选中的背景颜色 */
+    position: relative; /* 使勾号相对于复选框位置 */
+}
+.gr_checkbox input[type="checkbox"]:checked + label::after {
+    content: "✓"; /* 显示勾号 */
+    position: absolute; /* 绝对定位 */
+    left: 5px; /* 控制勾号的位置 */
+    top: -2px; /* 控制勾号的位置 */
+    color: white; /* 勾号颜色 */
+    font-weight: bold; /* 加粗勾号 */
 }
 """