<track id="aulkd"><kbd id="aulkd"></kbd></track>

<ul id="aulkd"></ul>

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
  Dadurch wird sichergestellt, dass das H?kchen sichtbar ist und deutlich hervorsticht.<\/p>\n\n
  \n  \n  \n  Gestaltung des Etiketts\n<\/h2>\n\n
  Das Etikett hat die Form eines runden Knopfes. Wir verwenden CSS-Eigenschaften wie ?Border-Radius“, ?Box-Shadow“ und ?Background-Color“, um es zu formatieren. Darüber hinaus wird auf das Etikett ein sanfter übergangseffekt angewendet, der für ein interaktiveres Gefühl sorgt.
  \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
  Dieser Code positioniert das Etikett zentral, macht es rund und fügt einen Schatten für mehr Tiefe hinzu. Der übergangseffekt verbessert das Benutzererlebnis, indem er ?nderungen wie Hover- und Klickaktionen animiert.<\/p>\n\n
  \n  \n  \n  Hinzufügen des H?kchens mithilfe von Pseudoelementen\n<\/h2>\n\n
  Der interessanteste Teil dieses Designs ist das HTML-H?kchensymbol, das erscheint, wenn das Kontrollk?stchen aktiviert ist. Wir erstellen das H?kchensymbol mithilfe der Pseudoelemente :before und :after. Zun?chst sind diese Elemente mit der Deckkraft: 0:
   unsichtbar\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
  Diese Pseudoelemente bilden die beiden Teile des H?kchens. Das Vorher-Pseudoelement bildet die vertikale Linie und das Nachher-Element bildet die horizontale Linie des H?kchens.<\/p>\n
  \n  \n  \n  Ausl?sen des H?kchens bei der Auswahl des Kontrollk?stchens\n<\/h2>\n\n
  Wenn das Kontrollk?stchen aktiviert ist, verwenden wir die Pseudoklasse :checked, um die Hintergrundfarbe zu ?ndern und das HTML-H?kchenzeichen anzuzeigen:
  \n<\/p>\n\n
  \n\n\n    \n    \n    \n    \n