Custom checkbox/radio inputs

About

This is an example of how to creatively customize checkboxes and radio inputs using pure CSS.

Who are you?

What is your favorite pet?

What is your favorite season?

HTML

                        <!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>
                    

CSS (Sass is included in ZIP)

                        *,
*::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;
}