← All elements
<div class="list"><label><input type="checkbox" checked> Write markup</label><label><input type="checkbox" checked> Style it</label><label><input type="checkbox"> Ship it</label></div>About this button
A checkbox restyled by removing the native look and drawing the tick with a pseudo-element and clip-path.
How it works
Setting appearance: none removes the browser's native checkbox look and leaves a plain box that can be styled. The tick is drawn by the ::after pseudo-element using a clip-path polygon, and it scales from zero to full size when the box is :checked, with a springy cubic-bezier.
Ways to customise it
- Change the checked background and border to your brand colour.
- Alter the clip-path points to draw a different mark.
- Increase the width and height for a larger tap target.
Good to know
It is still a real checkbox, so form submission, labels and keyboard behaviour all work. appearance: none is supported in all current browsers, and the focus ring is kept visible.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.