This is an example of how to creatively customize checkboxes and radio inputs using pure CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom checkbox/radio inputs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form action="/" method="POST">
<div class="selection-list">
<h3 class="selection-list-title">Who are you?</h3>
<div class="choice first-style">
<input type="radio" name="user-type" id="developer" value="developer" checked>
<div class="card">
<div class="serial-number" data-serial-number="1"></div>
<label for="developer">Developer</label>
</div>
</div>
<div class="choice first-style">
<input type="radio" name="user-type" id="designer" value="designer">
<div class="card">
<div class="serial-number" data-serial-number="2"></div>
<label for="designer">Designer</label>
</div>
</div>
<div class="choice first-style">
<input type="radio" name="user-type" id="system-administrator" value="system-administrator">
<div class="card">
<div class="serial-number" data-serial-number="3"></div>
<label for="system-administrator">System Administrator</label>
</div>
</div>
</div>
<div class="selection-list">
<h3 class="selection-list-title">What is your favorite pet?</h3>
<div class="choice second-style">
<input type="radio" name="pet" id="cat" value="cat" checked>
<div class="card">
<div class="icon">
<svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m444.38 3.741c10.828-8.798 27.018-1.092 27.018 12.859v222.01l-182.26-107.7 155.24-127.17z" fill="#FFC850"/><path d="m454.83 228.82l-110.97-65.574 92.462-104.24c6.465-7.288 18.511-2.716 18.511 7.027v162.79z" fill="#EBAF4B"/><path d="M67.619,3.741C56.79-5.057,40.601,2.649,40.601,16.6v222.01l182.26-107.699L67.619,3.741z" fill="#FFC850"/><path d="m57.17 228.82l110.97-65.574-92.462-104.24c-6.465-7.288-18.511-2.716-18.511 7.027v162.79z" fill="#EBAF4B"/><ellipse cx="256" cy="292.46" rx="231.97" ry="219.54" fill="#FFDC64"/><path d="m289.14 429.16v16.569c0 18.302-14.836 33.138-33.138 33.138s-33.138-14.836-33.138-33.138v-16.569l33.138-16.569 33.138 16.569z" fill="#FF8087"/><path d="m274.29 343.86h-36.588c-7.899 0-12.273 9.157-7.307 15.3l18.295 22.634c3.76 4.651 10.852 4.651 14.613 0l18.295-22.634c4.965-6.143 0.592-15.3-7.308-15.3z" fill="#5D5360"/><g fill="#E1A546"><path d="m479.67 437.44c-1.286 0-2.593-0.299-3.815-0.934-50.092-26.047-128.49-41.524-129.28-41.678-4.49-0.874-7.419-5.226-6.545-9.717 0.878-4.494 5.186-7.427 9.717-6.545 3.301 0.643 81.515 16.076 133.75 43.239 4.057 2.112 5.639 7.111 3.527 11.173-1.476 2.836-4.364 4.462-7.358 4.462z"/><path d="m496.26 379.45c-0.712 0-1.436-0.093-2.156-0.287-46.435-12.483-130.87-10.113-131.7-10.077-4.652 0.134-8.398-3.459-8.531-8.03-0.138-4.575 3.459-8.394 8.03-8.531 3.56-0.113 87.736-2.476 136.51 10.635 4.417 1.189 7.035 5.732 5.849 10.153-0.996 3.698-4.341 6.133-7.998 6.137z"/></g><path d="m313.99 495.43c-128.11 0-231.97-98.291-231.97-219.54 0-89.035 56.034-165.63 136.52-200.08-110.29 16.952-194.51 107.48-194.51 216.65 0 121.25 103.86 219.54 231.97 219.54 34.037 0 66.328-6.995 95.449-19.459-12.198 1.875-24.7 2.89-37.457 2.89z" fill="#FFC850"/><g fill="#E1A546"><path d="m32.324 437.44c-2.993 0-5.882-1.622-7.358-4.462-2.112-4.061-0.53-9.061 3.527-11.173 52.24-27.163 130.45-42.596 133.75-43.239 4.494-0.902 8.839 2.055 9.717 6.545 0.874 4.49-2.055 8.843-6.545 9.717-0.789 0.154-79.189 15.631-129.28 41.678-1.222 0.635-2.528 0.934-3.815 0.934z"/><path d="m15.743 379.45c-3.657 0-7.002-2.439-7.997-6.137-1.185-4.421 1.432-8.964 5.849-10.153 48.777-13.115 132.94-10.736 136.51-10.635 4.571 0.138 8.167 3.956 8.03 8.531-0.138 4.571-4.098 8.196-8.531 8.03-0.849-0.028-85.297-2.407-131.7 10.077-0.721 0.194-1.445 0.287-2.157 0.287z"/></g><path d="m160.73 321.46c-15.948 0-28.996-13.048-28.996-28.996v-16.569c0-15.948 13.048-28.996 28.996-28.996s28.996 13.048 28.996 28.996v16.569c0 15.947-13.048 28.996-28.996 28.996z" fill="#4B3F4E"/><path d="m160.73 246.9c-1.418 0-2.778 0.221-4.142 0.421v41.002c0 9.151 7.418 16.569 16.569 16.569s16.569-7.418 16.569-16.569v-12.427c0-15.948-13.049-28.996-28.996-28.996z" fill="#5D5360"/><circle cx="160.73" cy="267.61" r="12.427" fill="#fff"/><path d="m351.27 321.46c-15.948 0-28.996-13.048-28.996-28.996v-16.569c0-15.948 13.048-28.996 28.996-28.996s28.996 13.048 28.996 28.996v16.569c0 15.947-13.048 28.996-28.996 28.996z" fill="#4B3F4E"/><path d="m351.27 246.9c-1.418 0-2.778 0.221-4.142 0.421v41.002c0 9.151 7.418 16.569 16.569 16.569s16.569-7.418 16.569-16.569v-12.427c0-15.948-13.048-28.996-28.996-28.996z" fill="#5D5360"/><circle cx="351.27" cy="267.61" r="12.427" fill="#fff"/><path d="m262.41 382.15l-18.295-36.215c-0.332-0.658-0.518-1.378-0.769-2.074h-5.639c-7.899 0-12.273 9.157-7.308 15.3l18.295 22.634c3.55 4.39 9.981 4.485 13.863 0.587-0.044-0.085-0.102-0.143-0.147-0.232z" fill="#4B3F4E"/><path d="m256 412.59l-33.138 16.569v16.569c0 2.629 0.383 5.154 0.961 7.606 8.337-1.034 16.389-3.449 23.892-7.153v7.831c0 4.575 3.709 8.285 8.285 8.285s8.285-3.709 8.285-8.285v-7.83c7.504 3.704 15.556 6.119 23.892 7.152 0.578-2.452 0.961-4.978 0.961-7.606v-16.569l-33.138-16.569z" fill="#E6646E"/><path d="m297.42 437.44c-11.719 0-23.013-3.483-32.653-10.073-5.162-3.527-12.374-3.527-17.544 0-9.636 6.59-20.93 10.073-32.649 10.073-14.259 0-27.993-5.275-38.672-14.85-3.406-3.058-3.689-8.297-0.635-11.703s8.281-3.689 11.703-0.635c13.911 12.483 35.683 13.847 50.905 3.434 10.841-7.403 25.408-7.403 36.241 0 15.226 10.408 37.001 9.041 50.913-3.43 3.402-3.05 8.636-2.775 11.699 0.639 3.054 3.406 2.767 8.645-0.639 11.699-10.681 9.575-24.41 14.846-38.669 14.846z" fill="#EBAF4B"/></svg>
</div>
<label for="cat">Cat</label>
</div>
</div>
<div class="choice second-style">
<input type="radio" name="pet" id="dog" value="dog">
<div class="card">
<div class="icon">
<svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m437.68 45.419h-82.581c-29.935 11.871-36.571-8.258-99.096-8.258s-69.161 20.129-99.097 8.258h-82.58l-11.011 207.48c6.882 81.548 57.462 125.94 97.377 142.11h190.62c39.914-16.172 90.495-60.559 97.377-142.11l-11.012-207.48z" fill="#F5DCB4"/><path d="m355.1 45.419c92.981 27.831 42.363 171.36 102.23 233.39 8.595 8.906 23.781 4.95 27.368-6.895 4.74-15.651 9.474-40.411 8.721-75.789-1.032-48.516 18.581-51.612 18.581-51.612s-24.774-115.61-99.097-115.61c-24.774 0-57.806 16.516-57.806 16.516z" fill="#965A50"/><path d="m169.29 260.13c-15.897 0-28.903-13.006-28.903-28.903v-16.516c0-15.897 13.006-28.903 28.903-28.903s28.903 13.006 28.903 28.903v16.516c1e-3 15.898-13.006 28.903-28.903 28.903z" fill="#4B3F4E"/><path d="m169.29 185.81c-1.413 0-2.769 0.221-4.129 0.419v40.871c0 9.121 7.395 16.516 16.516 16.516 9.122 0 16.516-7.395 16.516-16.516v-12.386c1e-3 -15.896-13.006-28.904-28.903-28.904z" fill="#5D5360"/><circle cx="169.29" cy="206.45" r="12.387" fill="#fff"/><path d="m342.71 260.13c-15.897 0-28.903-13.006-28.903-28.903v-16.516c0-15.897 13.006-28.903 28.903-28.903s28.903 13.006 28.903 28.903v16.516c0 15.898-13.007 28.903-28.903 28.903z" fill="#4B3F4E"/><path d="m342.71 185.81c-1.413 0-2.769 0.221-4.129 0.419v40.871c0 9.121 7.395 16.516 16.516 16.516 9.122 0 16.516-7.395 16.516-16.516v-12.386c0-15.896-13.007-28.904-28.903-28.904z" fill="#5D5360"/><circle cx="342.71" cy="206.45" r="12.387" fill="#fff"/><path d="m457.33 278.81c8.595 8.906 23.781 4.95 27.368-6.896 2.718-8.976 5.399-21.06 7.08-36.313-16.234-8.092-30.092-33.91-38.617-77.669-15.484-79.484-37.161-123.87-98.064-112.52 92.981 27.831 42.363 171.36 102.23 233.4z" fill="#824641"/><path d="m160.69 395.01h39.141s-68.732-46.107-80.087-127.66c-22.089-158.64 19.957-206.11 56.324-218.22-5.761 0.195-11.745-0.774-19.163-3.715h-82.581l-11.011 207.48c6.882 81.548 57.462 125.94 97.377 142.11z" fill="#E7C9A5"/><path d="m156.9 45.419c-92.981 27.831-42.362 171.36-102.23 233.39-8.595 8.906-23.781 4.95-27.368-6.895-4.74-15.651-9.474-40.411-8.721-75.789 1.032-48.516-18.581-51.612-18.581-51.612s24.774-115.61 99.097-115.61c24.774 0 57.806 16.516 57.806 16.516z" fill="#965A50"/><path d="m154.14 44.104c-8.38-3.888-34.516-15.201-55.042-15.201-74.323 0-99.097 115.61-99.097 115.61s19.613 3.097 18.581 51.613c-0.014 0.648 5e-3 1.231-5e-3 1.872 47.521-180.29 120.54-160.23 135.56-153.9z" fill="#824641"/><ellipse cx="256" cy="400.52" rx="90.84" ry="66.06" fill="#BC8E78"/><path d="m214.71 400.52v41.29c0 22.804 18.486 41.29 41.29 41.29s41.29-18.486 41.29-41.29v-41.29h-82.58z" fill="#FF8087"/><path d="m214.71 432.77c11.941-1.496 23.208-5.129 33.032-10.622v11.402c0 4.56 3.698 8.258 8.258 8.258s8.258-3.698 8.258-8.258v-11.507c9.729 5.552 21.026 9.225 33.032 10.73v-32.256h-82.58v32.253z" fill="#E6646E"/><path d="m309.68 326.19h-107.35c-34.206 0-61.935 20.335-61.935 45.419s27.73 45.419 61.935 45.419c17.225 0 32.782-5.169 43.995-13.498 2.839-2.108 6.262-3.162 9.679-3.162 3.423 0 6.846 1.053 9.685 3.162 11.213 8.329 26.77 13.498 43.995 13.498 34.206 0 61.935-20.335 61.935-45.419 1e-3 -25.084-27.729-45.419-61.935-45.419z" fill="#D4AF91"/><path d="m256 293.16c27.365 0 49.548 14.789 49.548 33.032 0 17.594-20.824 26.858-35.853 33.708-8.712 3.971-18.68 3.971-27.392 0-15.029-6.85-35.853-16.114-35.853-33.708 2e-3 -18.242 22.185-33.032 49.55-33.032z" fill="#5D5360"/><path d="m230.97 317.16c-1.155-10.393 6.166-21.507 6.166-21.507-18.003 4.949-30.682 16.751-30.682 30.539 0 17.593 20.824 26.857 35.853 33.708 8.711 3.97 18.68 3.97 27.392 0 3.232-1.473 6.732-3.069 10.235-4.824-20.319-3.593-46.642-17.012-48.964-37.916z" fill="#4B3F4E"/></svg>
</div>
<label for="dog">Dog</label>
</div>
</div>
</div>
<div class="selection-list">
<h3 class="selection-list-title">What is your favorite season?</h3>
<div class="choice third-style">
<input type="checkbox" name="season" id="winter" value="winter" checked>
<div class="card">
<label for="winter">Winter</label>
</div>
</div>
<div class="choice third-style">
<input type="checkbox" name="season" id="spring" value="spring">
<div class="card">
<label for="spring">Spring</label>
</div>
</div>
<div class="choice third-style">
<input type="checkbox" name="season" id="summer" value="summer">
<div class="card">
<label for="summer">Summer</label>
</div>
</div>
<div class="choice third-style">
<input type="checkbox" name="season" id="autumn" value="autumn">
<div class="card">
<label for="autumn">Autumn</label>
</div>
</div>
</div>
</form>
</body>
</html>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: Arial, sans-serif;
background-color: #F5F5F5;
}
form {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
margin: 50px auto;
}
.selection-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -10px 50px;
}
.selection-list .selection-list-title {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.choice {
position: relative;
width: 250px;
padding: 0 10px;
margin-bottom: 20px;
}
.choice input[type="radio"], .choice input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 3;
}
.choice input[type="radio"]:disabled, .choice input[type="checkbox"]:disabled {
cursor: not-allowed;
}
.choice input[type="radio"]:disabled + .card, .choice input[type="checkbox"]:disabled + .card {
filter: grayscale(100%);
}
.choice .card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}
.choice .card label {
padding: 0 20px;
font-weight: 700;
}
.choice.first-style input:checked + .card {
border-color: #2324FF;
color: #2324FF;
}
.choice.first-style .card {
background-color: #FFFFFF;
border: 2px solid #FFFFFF;
border-radius: 20px;
transition: border-color .5s, color .5s;
}
.choice.first-style .card label {
color: #2324FF;
margin-bottom: 40px;
}
.choice.first-style .serial-number {
position: relative;
width: 120px;
height: 120px;
margin: 40px auto 40px;
}
.choice.first-style .serial-number:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50%;
background-color: rgba(35, 36, 255, 0.25);
pointer-events: none;
}
.choice.first-style .serial-number:after {
content: attr(data-serial-number);
position: absolute;
left: -10px;
top: -25px;
font-family: serif;
font-size: 7rem;
font-weight: 700;
color: #2324FF;
pointer-events: none;
}
.choice.second-style input:checked + .card .icon {
border-color: #2324FF;
}
.choice.second-style input:checked + .card .icon:before {
background-color: #2324FF;
}
.choice.second-style input:checked + .card .icon:after {
border-color: transparent transparent #FFFFFF #FFFFFF;
}
.choice.second-style .card label {
margin: 20px 0;
}
.choice.second-style .icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #FFFFFF;
border: 2px solid #FFFFFF;
transition: border-color .5s;
}
.choice.second-style .icon:before {
content: '';
position: absolute;
right: 5px;
top: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent;
transition: background-color .5s;
}
.choice.second-style .icon:after {
content: '';
position: absolute;
right: 13px;
top: 13px;
width: 13px;
height: 8px;
border-width: 2px;
border-style: solid;
border-color: transparent transparent transparent transparent;
transform: rotate(-45deg);
transition: border-color .5s;
}
.choice.second-style .icon svg {
width: 75px;
}
.choice.third-style {
width: 187.5px;
}
.choice.third-style input:checked + .card {
border-color: #2324FF;
color: #2324FF;
}
.choice.third-style input:checked + .card:before {
background-color: #2324FF;
}
.choice.third-style input:checked + .card:after {
border-color: transparent transparent #FFFFFF #FFFFFF;
}
.choice.third-style .card {
position: relative;
padding: 50px 10px;
background-color: #FFFFFF;
border: 2px solid #FFFFFF;
border-radius: 10px;
transition: border-color .5s, color .5s;
}
.choice.third-style .card:before {
content: '';
position: absolute;
right: 10px;
top: 10px;
width: 25px;
height: 25px;
border-radius: 4px;
background-color: transparent;
transition: background-color .5s;
}
.choice.third-style .card:after {
content: '';
position: absolute;
right: 16px;
top: 16px;
width: 13px;
height: 8px;
border-width: 2px;
border-style: solid;
border-color: transparent transparent transparent transparent;
transform: rotate(-45deg);
transition: border-color .5s;
}