Question 1

How do I style a checkbox with CSS?

Accepted Answer

Hide the native checkbox with appearance: none, then use ::before or ::after to add a custom indicator: input[type=checkbox] { appearance: none; width: 18px; height: 18px; border: 2px solid #666; border-radius: 4px; } input[type=checkbox]:checked { background: #007bff; } input[type=checkbox]:checked::after { content: '✓'; color: #fff; display: block; text-align: center; }

Question 2

How do I create a custom toggle switch with CSS?

Accepted Answer

Use a checkbox with a label styled as a pill: .toggle input { display: none; } .toggle label { display: block; width: 44px; height: 24px; background: #ccc; border-radius: 24px; position: relative; cursor: pointer; transition: background .2s; } .toggle label::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; } .toggle input:checked + label { background: #007bff; } .toggle input:checked + label::after { transform: translateX(20px); }

Related Tools