In this structure:<\/p>\n\n<\/pre>\n

\n
• The checkbox is hidden using display: none; in the CSS, making it invisible to users.<\/li>\n
• A label is used to create a clickable area that will act as the checkbox. The label element is linked to the checkbox by the for=\"_checkbox\" attribute.<\/li>\n
• The div with the ID tick_mark serves as a container for the HTML tick mark, where the tick icon will be rendered when the checkbox is checked.<\/li>\n<\/ul>\n\n

  \n \n \n Designing the Tick Mark with CSS\n<\/h2>\n\n

  Once the basic HTML is in place, we can move on to styling. The goal is to create an attractive checkbox that not only functions properly but also provides a visually satisfying experience for the user.<\/p>\n\n

  \n \n \n Setting the Background and Layout\n<\/h2>\n\n

  The first step is to set the background color of the page to black and remove default margin and padding. This makes the checkbox stand out against the dark background. Here is how we style the body:
  \n<\/p>\n\n

  html,\nbody {\n    height: 100%;\n    background-color: black;\n}\n\nbody {\n    margin: 0;\n}\n\n<\/pre>\n\n\n\n
  這可確保刻度線可見且清晰可見。<\/p>\n\n
  \n  \n  \n  設置標簽樣式\n<\/h2>\n\n
  標簽將采用圓形按鈕的形狀。我們使用 border-radius、box-shadow 和 background-color 等 CSS 屬性來設置樣式。此外，標簽上還應用了平滑過渡效果，以帶來更具交互性的感覺。
  \n<\/p>\n\n
  label {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    left: 0;\n    width: 100px;\n    height: 100px;\n    margin: 0 auto;\n    background-color: #5e2cd3;\n    transform: translateY(-50%);\n    border-radius: 50%;\n    box-shadow: 0 7px 10px #bdb8ff;\n    cursor: pointer;\n    transition: 0.2s ease transform, 0.2s ease background-color,\n      0.2s ease box-shadow;\n    overflow: hidden;\n    z-index: 1;\n}\n\n<\/pre>\n\n\n\n
  此代碼將標簽置于中心位置，使其變圓，并添加陰影以增加深度。過渡效果通過懸停和單擊操作等動畫變化增強了用戶體驗。<\/p>\n\n
  \n  \n  \n  使用偽元素添加刻度線\n<\/h2>\n\n
  此設計中最有趣的部分是 HTML 勾號符號，當選中復選框時會出現(xiàn)該符號。我們使用 :before 和 :after 偽元素創(chuàng)建勾號圖標。最初，這些元素不可見且不透明度：0:
  \n<\/p>\n\n
  #tick_mark {\n    position: absolute;\n    top: -1px;\n    right: 0;\n    left: 0;\n    width: 60px;\n    height: 60px;\n    margin: 0 auto;\n    margin-left: 14px;\n    transform: rotateZ(-40deg);\n}\n\n#tick_mark:before,\n#tick_mark:after {\n    content: \"\";\n    position: absolute;\n    background-color: #fff;\n    border-radius: 2px;\n    opacity: 0;\n    transition: 0.2s ease transform, 0.2s ease opacity;\n}\n\n<\/pre>\n\n\n\n
  這些偽元素創(chuàng)建刻度線的兩部分。 before 偽元素形成垂直線，after 元素形成刻度的水平線。<\/p>\n
  \n  \n  \n  觸發(fā)復選框選擇上的刻度線\n<\/h2>\n\n
  當復選框被選中時，我們使用 :checked 偽類來更改背景顏色并顯示 HTML 刻度字符：
  \n<\/p>\n\n
  \n\n\n    \n    \n    \n    \n