Copy the generated CSS and paste it into your stylesheet. Then add the class .custom-radio or .custom-checkbox to your <input> elements, and use <label> right after the input. The generator assumes a structure like <input type="radio" class="custom-radio" id="r1"> <label for="r1">Label</label>.

Yes. The custom styles hide the native input but it remains focusable. The label is associated via the for attribute, so keyboard and screen reader interactions remain intact. All generated styles include :focus-visible outlines for accessibility.

Absolutely. Use the “Apply to” toggle at the top of the controls. Choose “Radio Only”, “Checkbox Only”, or “Both” to output exactly what you need.

The generator uses pure CSS (pseudo-elements and borders) to create the indicator. Radio buttons always remain round; checkboxes use the border-radius you set. If you need a different symbol (like a dash for indeterminate state), you can manually tweak the generated CSS by modifying the ::after pseudo-element.

Yes. The generated CSS uses standard properties (flex, transition, opacity, etc.) and works in Chrome, Firefox, Safari, and Edge. IE 11 is not fully supported due to the use of modern selectors, but overall browser coverage is excellent.