Online CSS Checkbox Generator
Generate CSS for custom-styled checkboxes. Choose size, color, and border style.
.cb-wrap {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.cb-wrap input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.cb-wrap .cb-box {
width: 20px;
height: 20px;
border: 2px solid #2563eb;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s, border-color 0.2s;
}
.cb-wrap input:checked + .cb-box {
background: #2563eb;
}
.cb-wrap .cb-box::after {
content: '';
width: 8px;
height: 4px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
margin-bottom: 2px;
opacity: 0;
}
.cb-wrap input:checked + .cb-box::after {
opacity: 1;
}HTML snippet:
<label class="cb-wrap"> <input type="checkbox" /> <span class="cb-box"></span> <span>Label text</span> </label>
Frequently Asked Questions
- How do I use the generated CSS?
- Add the CSS to your stylesheet and use the class on a wrapper around an input type="checkbox".
- Does it hide the native checkbox?
- Yes. The CSS hides the default checkbox and styles a custom appearance.
Related Developer Tools
JSON Formatter
Format, validate, and beautify JSON. Minify or pretty-print with one click.
Base64 Decode
Decode Base64 strings to text. Encode text to Base64.
UUID Generator
Generate random UUIDs (v4) for unique identifiers. Copy with one click.
URL Encoder Decoder
Encode and decode URLs. Convert special characters for safe use in URLs.
Convert Color Hex to RGB
Convert hex color codes to RGB values (R, G, B).
Convert Color RGB to Hex
Convert RGB values (R, G, B) to hex color codes.