HTML-CSS: Custom checkbox

Last update on March 07 2024 13:22:48 (UTC/GMT +8 hours)

HTML-CSS : Exercise-1 with Solution

Using HTML, CSS create a styled checkbox with animation on state change.

Use an <svg> element to create the check <symbol> and insert it via the <use> element to create a reusable SVG icon.
Create a .checkbox-container and use flexbox to create the appropriate layout for the checkboxes.
Hide the <input> element and use the label associated with it to display a checkbox and the provided text.
Use stroke-dashoffset to animate the check symbol on state change.
Use transform: scale(0.9) via a CSS animation to create a zoom animation effect.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<head><!-- Head section containing metadata -->
<meta charset="utf-8"><!-- Character encoding declaration -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag for responsive design -->
<title>Using HTML, CSS create a styled checkbox with animation on state change</title><!-- Title of the HTML document -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<div class="w3rcontainer"><strong>Preview:</strong><!-- Container div for preview with heading -->
<div class="checkbox-container"><!-- Container for checkboxes -->
<input class="checkbox-input" id="oranges" type="checkbox" /><!-- Checkbox input for oranges -->
<label class="checkbox" for="oranges"><!-- Label for oranges checkbox -->
<span><!-- Span for custom checkbox style -->
<svg width="12px" height="10px"><!-- SVG for custom checkbox icon -->
<use xlink:href="#check"></use><!-- Reference to external SVG symbol -->
</svg>
</span>
<span>Oranges</span><!-- Text label for oranges checkbox -->
</label>
<input class="checkbox-input" id="bananas" type="checkbox" /><!-- Checkbox input for bananas -->
<label class="checkbox" for="bananas"><!-- Label for bananas checkbox -->
<span><!-- Span for custom checkbox style -->
<svg width="12px" height="10px"><!-- SVG for custom checkbox icon -->
<use xlink:href="#check"></use><!-- Reference to external SVG symbol -->
</svg>
</span>
<span>Bananas</span><!-- Text label for bananas checkbox -->
</label>
</div><!-- Closing checkbox-container -->
</div><!-- Closing w3rcontainer -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

The HTML document contains a simple structure for creating styled checkboxes with animations on state change.
Two checkboxes are included, one for oranges and one for bananas.
Each checkbox consists of an input element and a label element.
The input element has a class of "checkbox-input" and a unique ID.
The label element has a class of "checkbox" and is associated with the corresponding input element using the "for" attribute.
Inside each label, there are two spans: one for the custom checkbox style and another for the text label.
SVGs are used for custom checkbox icons, and they are referenced externally using the "use" element.
Comments are provided to explain each section of the HTML code, including the purpose of each element and attribute.

CSS Code:

<style> /* Opening style tag for CSS */
.w3rcontainer{ /* CSS rule for w3rcontainer class */
   border: 1px solid #cccfdb; /* Style for border */
   border-radius: 2px; /* Style for border radius */
} /* Closing w3rcontainer class */

.hover-underline-animation { /* CSS rule for hover-underline-animation class */
  display: inline-block; /* Display property set to inline-block */
  position: relative; /* Position property set to relative */
  color: #0087ca; /* Text color set to #0087ca */
}

.hover-underline-animation:after { /* CSS rule for pseudo-element :after */
  content: ''; /* Content property set to empty string */
  position: absolute; /* Position property set to absolute */
  width: 100%; /* Width set to 100% */
  transform: scaleX(0); /* Initial transformation scaleX set to 0 */
  height: 2px; /* Height set to 2px */
  bottom: 0; /* Positioned at the bottom */
  left: 0; /* Positioned at the left */
  background-color: #0087ca; /* Background color set to #0087ca */
  transform-origin: bottom right; /* Origin of transformation set to bottom right */
  transition: transform 0.25s ease-out; /* Transition property for smooth animation */
}

.hover-underline-animation:hover:after { /* CSS rule for hover state of :after pseudo-element */
  transform: scaleX(1); /* Transformation scaleX set to 1 on hover */
  transform-origin: bottom left; /* Origin of transformation set to bottom left on hover */
}

</style> /* Closing style tag */

Explanation:

The CSS code defines styles for creating an underline animation on hover for elements with the class "hover-underline-animation".
w3rcontainer class is styled to have a border with rounded corners.
hover-underline-animation class is defined to make the text color blue and apply the underline animation on hover.
:after pseudo-element is used to create the underline effect.
Initial transformation scaleX(0) is applied to hide the underline.
On hover, scaleX(1) is applied to reveal the underline.
Transition property is added to make the animation smooth.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.