Result
CSS ScanでCSSでスタイリングされた実用的でユニークなチェックボックスが沢山紹介されています。
どれもクリックだけでコピー可能で、CSSとHTMLがセットになったコードを発行しているのでペーストするだけで実装できるようになっています。
全てJavaScript不要で実装可能です。
css
.checkbox-wrapper-11 { --text: #414856; --check: #4F29F0; --disabled: #C3C8DE; --border-radius: 10px; border-radius: var(--border-radius); position: relative; padding: 5px; display: grid; grid-template-columns: 30px auto; align-items: center; } .checkbox-wrapper-11 label { color: var(--text); position: relative; cursor: pointer; display: grid; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; transition: color 0.3s ease; } .checkbox-wrapper-11 label::before, .checkbox-wrapper-11 label::after { content: ""; position: absolute; } .checkbox-wrapper-11 label::before { height: 2px; width: 8px; left: -27px; background: var(--check); border-radius: 2px; transition: background 0.3s ease; } .checkbox-wrapper-11 label:after { height: 4px; width: 4px; top: 8px; left: -25px; border-radius: 50%; } .checkbox-wrapper-11 input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; position: relative; height: 15px; width: 15px; outline: none; border: 0; margin: 0 15px 0 0; cursor: pointer; background: var(--background); display: grid; align-items: center; } .checkbox-wrapper-11 input[type=checkbox]::before, .checkbox-wrapper-11 input[type=checkbox]::after { content: ""; position: absolute; height: 2px; top: auto; background: var(--check); border-radius: 2px; } .checkbox-wrapper-11 input[type=checkbox]::before { width: 0px; right: 60%; transform-origin: right bottom; } .checkbox-wrapper-11 input[type=checkbox]::after { width: 0px; left: 40%; transform-origin: left bottom; } .checkbox-wrapper-11 input[type=checkbox]:checked::before { -webkit-animation: check-01-11 0.4s ease forwards; animation: check-01-11 0.4s ease forwards; } .checkbox-wrapper-11 input[type=checkbox]:checked::after { -webkit-animation: check-02-11 0.4s ease forwards; animation: check-02-11 0.4s ease forwards; } .checkbox-wrapper-11 input[type=checkbox]:checked + label { color: var(--disabled); -webkit-animation: move-11 0.3s ease 0.1s forwards; animation: move-11 0.3s ease 0.1s forwards; } .checkbox-wrapper-11 input[type=checkbox]:checked + label::before { background: var(--disabled); -webkit-animation: slice-11 0.4s ease forwards; animation: slice-11 0.4s ease forwards; } .checkbox-wrapper-11 input[type=checkbox]:checked + label::after { -webkit-animation: firework-11 0.5s ease forwards 0.1s; animation: firework-11 0.5s ease forwards 0.1s; } @-webkit-keyframes move-11 { 50% { padding-left: 8px; padding-right: 0px; } 100% { padding-right: 4px; } } @keyframes move-11 { 50% { padding-left: 8px; padding-right: 0px; } 100% { padding-right: 4px; } } @-webkit-keyframes slice-11 { 60% { width: 100%; left: 4px; } 100% { width: 100%; left: -2px; padding-left: 0; } } @keyframes slice-11 { 60% { width: 100%; left: 4px; } 100% { width: 100%; left: -2px; padding-left: 0; } } @-webkit-keyframes check-01-11 { 0% { width: 4px; top: auto; transform: rotate(0); } 50% { width: 0px; top: auto; transform: rotate(0); } 51% { width: 0px; top: 8px; transform: rotate(45deg); } 100% { width: 5px; top: 8px; transform: rotate(45deg); } } @keyframes check-01-11 { 0% { width: 4px; top: auto; transform: rotate(0); } 50% { width: 0px; top: auto; transform: rotate(0); } 51% { width: 0px; top: 8px; transform: rotate(45deg); } 100% { width: 5px; top: 8px; transform: rotate(45deg); } } @-webkit-keyframes check-02-11 { 0% { width: 4px; top: auto; transform: rotate(0); } 50% { width: 0px; top: auto; transform: rotate(0); } 51% { width: 0px; top: 8px; transform: rotate(-45deg); } 100% { width: 10px; top: 8px; transform: rotate(-45deg); } } @keyframes check-02-11 { 0% { width: 4px; top: auto; transform: rotate(0); } 50% { width: 0px; top: auto; transform: rotate(0); } 51% { width: 0px; top: 8px; transform: rotate(-45deg); } 100% { width: 10px; top: 8px; transform: rotate(-45deg); } } @-webkit-keyframes firework-11 { 0% { opacity: 1; box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0; } 30% { opacity: 1; } 100% { opacity: 0; box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0; } } @keyframes firework-11 { 0% { opacity: 1; box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0; } 30% { opacity: 1; } 100% { opacity: 0; box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0; } } |
1つの例です。Todoに使えるチェックボックス。チェックを入れると同時に線を入れてくれます。
html
<div class="checkbox-wrapper-11"> <input id="02-11" type="checkbox" name="r" value="2"> <label for="02-11">To-do</label></div> |
via
Beautiful CSS checkboxes examples
ブックマークして使ってねとの事です。
