> Canonical URL: https://codingcat.dev/course/css-animations/lesson/material-checkbox-without-material # Material Checkbox without Material UI (only CSS) | CSS Animations | CodingCat.dev Course [🧶 CSS Animations](/course/css-animations)Section 4.1 · Lesson 4 of 6[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[← Prev Lesson](/course/css-animations/lesson/round-loading-indicator)[Next Lesson →](/course/css-animations/lesson/css-scroll-driven-animations) # Material Checkbox without Material UI (only CSS) ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/3dd65de6faafc570ec71dfba4f966abb03470e9c-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=xEttLCcdX_4&list=PLR8Lbh-JC_Ck)Lesson 4 / 6Course Lessons Outline▾1Buttons - [1.1Material Hamburger Button](/course/css-animations/lesson/1_1-hamburger-button) 23rd Party Libraries - [2.1JavaScript Confetti library](/course/css-animations/lesson/3_1-js-confetti) 3Feedback - [3.1Round Loading Indicator](/course/css-animations/lesson/round-loading-indicator) 4Inputs - [4.1Material Checkbox without Material UI (only CSS)](/course/css-animations/lesson/material-checkbox-without-material) 52026 Modern Web Motion (Scroll-Driven & View Transitions) - [5.1CSS Scroll-Driven Animations (scroll() & view() Timelines)](/course/css-animations/lesson/css-scroll-driven-animations) - [5.2Cross-Document View Transitions API (@view-transition)](/course/css-animations/lesson/css-view-transitions-api) The main HTML is very simple, having just two key elements `input` and `span`. Copied! 🐾 ``` ``` In order to create the checkmark it is nothing more than a bottom, and left border colored green. The key here is that it is then rotated `45deg` to make it look like a check mark. Copied! 🐾 ``` input:checked ~ .checkbox { transform: rotate(45deg); height: 125px; width: 50px; margin-left: 50px; border-color: green; border-top-color: transparent; border-left-color: transparent; border-radius: 0; } ``` This JavaScript is not required, it shows the checked status. Copied! 🐾 ``` const input = Array.from(document.getElementsByTagName('input')).at(0); const result = document.getElementById('result'); input.addEventListener('input', () => { input.checked ? result.innerHTML = 'Checked: true' : result.innerHTML = 'Checked: false' }) ``` Below is a fully working example! ✏️ Visual Architecture Diagram ## how this course connects together. Follow AJ through the layered stack topology from input contract to production output. Let’s build it!✏️ Architecture Diagram: CSS Animations: Material Checkbox without Materi…LAYERED SYSTEM STACKARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven layered-stack diagram for CSS Animations: Material Checkbox without Material UI (only CSS): Inputs -> CSS Animations -> Verified Production Artifact.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](https://cdn.sanity.io/images/hfh83o0w/production/fce6fcae58667ff3143db133eb6b57fbd9ec471f-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-web-development-foundations)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[+1](/course/odin-web-development-foundations) ### [The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations) Master the complete Odin Project Foundations path modernized for 2026: how the web works, semantic HTML5, CSS Box Model & Flexbox, and JavaScript DOM fundamentals. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](https://cdn.sanity.io/images/hfh83o0w/production/93736ccee5b8c088a202f319ce1223899a41f6bf-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-advanced-html-css-and-a11y)November 4, 2026[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[#Accessibility](/topic/a11y)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[+1](/course/odin-advanced-html-css-and-a11y) ### [The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](/course/odin-advanced-html-css-and-a11y) Build 60fps GPU-accelerated animations, multi-page Astro View Transitions, WCAG AAA focus rings, and accessible native and Popover components. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/css-animations) ## CSS Animations 4/61 ### Buttons - [1.1Material Hamburger Button](/course/css-animations/lesson/1_1-hamburger-button) 2 ### 3rd Party Libraries - [2.1JavaScript Confetti library](/course/css-animations/lesson/3_1-js-confetti) 3 ### Feedback - [3.1Round Loading Indicator](/course/css-animations/lesson/round-loading-indicator) 4 ### Inputs - [4.1Material Checkbox without Material UI (only CSS)▶](/course/css-animations/lesson/material-checkbox-without-material) 5 ### 2026 Modern Web Motion (Scroll-Driven & View Transitions) - [5.1CSS Scroll-Driven Animations (scroll() & view() Timelines)](/course/css-animations/lesson/css-scroll-driven-animations) - [5.2Cross-Document View Transitions API (@view-transition)](/course/css-animations/lesson/css-view-transitions-api) @CodingCatDev on YouTube62.5K / 100K Subscribe for new course lessons and architecture deep dives every week. [Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)