コピペでできる！cssとhtmlのみでフォームのチェックボックスをわかりやすくするデザイン9選

CSS HTML
 
 

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。
チェックボックス[input type=”checkbox”]のデザインにエフェクトを追加することで、
今までよりワンランク上のわかりやすさを手に入れましょう。

browser:  ✔︎ ✔︎ ✔︎ 

フォームのチェックボックスをわかりやすくするデザイン[9種]

シンプルなチェックボックス

ニャン易度 
<div class="cp_ipcheck01">
  <input type="checkbox" id="a_ch1" checked /><label for="a_ch1">ネコ</label>
  <input type="checkbox" id="a_ch2" /><label for="a_ch2">イヌ</label>
  <input type="checkbox" id="a_ch3" /><label for="a_ch3">ウサギ</label>
  <input type="checkbox" id="a_ch4" disabled /><label for="a_ch3">ウサギ</label>
</div>
.cp_ipcheck01 {
  margin: 6em 2em;
}
.cp_ipcheck01 input[type=checkbox] {
  display: none;
}
/*通常時のラベルの設定*/
.cp_ipcheck01 label {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
  text-overflow: ellipsis;/*テキストがエリアを超えたら'…'で省略*/
  transition: all 0.15s ease;
  cursor: pointer;
}
/*通常時のチェックボックスの設定*/
.cp_ipcheck01 label::before {
  position: absolute;
  left: 0px;
  content: '';
  width: 10px;
  height: 10px;
  border: 0.2em solid #cccccc;
}
/* focus・hover・active・checked時のテキストの設定*/
.cp_ipcheck01 label:focus,
.cp_ipcheck01 label:hover,
.cp_ipcheck01 label:active,
.cp_ipcheck01 input:checked + label {
  color: #da3c41;
}
/* focus・hover・active時のチェックボックスの設定*/
.cp_ipcheck01 label:focus::before,
.cp_ipcheck01 label:hover::before,
.cp_ipcheck01 label:active::before {
  border-color: #da3c41;
  background: #ffffff;
}
/* checked時のチェックボックスの設定*/
.cp_ipcheck01 input:checked + label::before {
  border-color: #da3c41;
  background: #da3c41;
}
/*disabled時の設定*/
.cp_ipcheck01 input:disabled + label {
  cursor: not-allowed;
  color: #b8b7b7;
}
.cp_ipcheck01 input:disabled + label::before {
  border-color: #b8b7b7;
  background: #b8b7b7;
}
.cp_ipcheck01 input:disabled + label::after {
  position: absolute;
  left: 2px;
  content: '✖︎';
  color: #666666;
}

チェックした時にふわっと色の波紋が出るチェックボックス

ニャン易度 
<div class="cp_ipcheck02">
  <label><input type="checkbox" class="option-input02 checkbox" checked />ネコ</label>
  <label><input type="checkbox" class="option-input02 checkbox" />イヌ</label>
  <label><input type="checkbox" class="option-input02 checkbox" />ウサギ</label>
  <label><input type="checkbox" class="option-input02 checkbox" disabled />リス</label>
</div>
.cp_ipcheck02 label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.cp_ipcheck02 .option-input02 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #ffffff;
  background: #d7cbcb;
  cursor: pointer;
  transition: all 0.15s ease-out;
  /*デフォルト値を無効に*/
  border: none;
  outline: none;
  appearance: none;
}
/*hover時のチェックボックスの色*/
.cp_ipcheck02 .option-input02:hover {
  background: #d6a9a9;
}
/*checked時のチェックボックスの色*/
.cp_ipcheck02 .option-input02:checked {
  display: flex;
  width: 30px;
  height: 30px;
  background: #da3c41;
}
/*checked時のチェックボックスのチェックマーク*/
.cp_ipcheck02 .option-input02:checked::before {
  position: absolute;
  font-size: 130%;
  content: '✔';
}
.cp_ipcheck02 .option-input02:checked::after {
  position: relative;
  content: '';
  display: block;
  background: #da3c41;
  animation: click-wave 0.8s ease;
}
/*disabled時の設定*/
.cp_ipcheck02 .option-input02:disabled {
  display: flex;
  cursor: not-allowed;
  background: #b8b7b7;
}
.cp_ipcheck02 .option-input02:disabled::before {
  position: absolute;
  font-size: 130%;
  content: '✖︎';
}
/*クリックした時のアニメーション*/
@keyframes click-wave {
  0% {
    width: 30px;
    height: 30px;
    opacity: 0.35;
    border-radius: 40%;
  }
  100% {
    transform: scale(8);
    opacity: 0;
    border-radius: 50%;
  }
}

チェックした時にチェックボックスが文字を覆う

ニャン易度 
<div class="cp_ipcheck03">
  <input type="checkbox" id="b_ch1" checked />
  <label for="b_ch1">ネコ</label>
  <input type="checkbox" id="b_ch2" />
  <label for="b_ch2">イヌ</label>
  <input type="checkbox" id="b_ch3" />
  <label for="b_ch3">ウサギ</label>
</div>
.cp_ipcheck03 {
  margin: 2em auto;
  display: flex;
}
/*デフォルトのチェックボックスの設定*/
.cp_ipcheck03 input[type='checkbox'] {
  display: none;
}
/*通常時のチェックボックスの設定*/
.cp_ipcheck03 label {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 20px;
  padding-left: 35px;
  padding-right: 10px;
  cursor: pointer;
  z-index: 99;
}
.cp_ipcheck03 label::before {
  position: absolute;
  left: 0;
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #da3c41;
  border-radius: 4px;
  z-index: -1;
}
/* Transition */
.cp_ipcheck03 label,
.cp_ipcheck03 label::before {
  transition: 0.25s all ease;
}
/*チェックボックスの設定*/
.cp_ipcheck03 input[type='checkbox'] + label::before {
  border-radius: 4px;
}
/*checked時のサイズと色の設定*/
.cp_ipcheck03 input[type='checkbox']:checked + label {
  padding-left: 10px;
  color: #ffffff;
}
.cp_ipcheck03 input[type='checkbox']:checked + label::before {
  width: 100%;
  height: 100%;
  background: #da3c41;
}

スイッチのようなチェックボックス

ニャン易度 
<div class="cp_ipcheck04">
  <input type="checkbox" id="c_ch1" checked />
  <label for="c_ch1">ネコ</label>
  <input type="checkbox" id="c_ch2" />
  <label for="c_ch2">イヌ</label>
  <input type="checkbox" id="c_ch3" />
  <label for="c_ch3">ウサギ</label>
</div>
.cp_ipcheck04 {
  margin: 2em auto;
}
/*デフォルトのチェックボックスの設定*/
.cp_ipcheck04 input[type='checkbox'] {
  display: none;
}
/*通常時のチェックボックスの設定*/
.cp_ipcheck04 label {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.cp_ipcheck04 input[type='checkbox'] + label:before,
.cp_ipcheck04 input[type='checkbox'] + label:after {
  position: absolute;
  content: '';
}
/*スイッチのベース*/
.cp_ipcheck04 input[type='checkbox'] + label:before {
  right: 0;
  width: 30px;
  height: 15px;
  background: #ffffff;
  border: 1px solid #e4e3e1;
  border-radius: 15px;
}
/*スイッチの●*/
.cp_ipcheck04 input[type='checkbox'] + label:after {
  right: 15px;
  width: 15px;
  height: 15px;
  background: #bdbdbd;
  border-radius: 50%;
  transition: all 200ms ease-out;
}
/*checked時の色と位置の設定*/
.cp_ipcheck04 input[type='checkbox']:checked + label:after {
  right: 0;
  background: #da3c41;
}

チェックが入るときにぴょこんと動く

ニャン易度 
<div class="cp_ipcheck05">
  <ul>
    <li class="list_item">
    <label><input type="checkbox" class="option-input05" checked />ネコ</label>
    </li>
    <li class="list_item">
    <label><input type="checkbox" class="option-input05" />イヌ</label>
    </li>
    <li class="list_item">
    <label><input type="checkbox" class="option-input05" />ウサギ</label>
    </li>
  </ul>
</div>
.cp_ipcheck05 {
  width: 90%;
  margin: 2em auto;
}
.cp_ipcheck05 ul {
  list-style: none;
}
.cp_ipcheck05 .list_item {
  margin-bottom: 10px;
}
/*ラベルの設定*/
.cp_ipcheck05 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
/*チェックボックスの設定*/
.cp_ipcheck05 .option-input05 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  /*デフォルト値を無効に*/
  border: none;
  outline: none;
  appearance: none;
}
.cp_ipcheck05 .option-input05::before,
.cp_ipcheck05 .option-input05::after {
  position: absolute;
  content: '';
  cursor: pointer;
}
.cp_ipcheck05 .option-input05::before {
  width: 15px;
  height: 15px;
  background: #da3c41;
  clip-path: polygon(0 70%, 5% 60%, 45% 75%, 90% 10%, 100% 20%, 50% 100%);
  transform: scale(0, 0);
  transition: all 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);/*ぴょこんの動き*/
  z-index: 1;
}
.cp_ipcheck05 .option-input05::after {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 2px solid #f2f2f2;
}
/*checked時の設定*/
.cp_ipcheck05 .option-input05:checked::before {
  transform: scale(1, 1);
}

チェックするとチェックの色が上下からバツになる

ニャン易度 
<div class="cp_ipcheck06">
  <ul>
    <li class="list_item">
    <label><input type="checkbox" class="option-input06" checked />ネコ</label>
    </li>
    <li class="list_item">
    <label><input type="checkbox" class="option-input06" />イヌ</label>
    </li>
    <li class="list_item">
    <label><input type="checkbox" class="option-input06" />ウサギ</label>
    </li>
  </ul>
</div>
.cp_ipcheck06 {
  margin: 2em auto;
}
.cp_ipcheck06 ul {
  list-style: none;
}
.cp_ipcheck06 .list_item {
  margin-bottom: 10px;
}
/*ラベルの設定*/
.cp_ipcheck06 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
/*チェックボックスの設定*/
.cp_ipcheck06 .option-input06 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  /*デフォルト値を無効に*/
  outline: none;
  appearance: none;
}
/* ×マークの設定*/
.cp_ipcheck06 .option-input06:before,
.cp_ipcheck06 .option-input06:after {
  position: absolute;
  top: 10px;
  left: -10px;
  width: 20px;
  height: 20px;
  content: '';
  transition: transform 0.4s ease-in-out, border-top 0.4s ease-in-out, border-bottom 0.4s ease-in-out, border-left 0.1s 0.3s ease-in-out, border-right 0.1s 0.3s ease-in-out;
  transform: translateX(0) translateY(-0.5rem);
  border: 2px solid #f2f2f2;
  border-top-style: none;
  border-right-style: none;
}
.cp_ipcheck06 .option-input06:after {
  border: 2px solid #f2f2f2;
  border-bottom-style: none;
  border-left-style: none;
}
/*checked時の設定*/
.cp_ipcheck06 .option-input06:checked:before {
  border-color: #e74c3c;
  border-left-style: none;
  transform: rotate(-45deg) translateX(6px) translateY(-14px);
}
.cp_ipcheck06 .option-input06:checked:after {
  border-color: #e74c3c;
  border-right-style: none;
  transform: rotate(45deg) translateX(-4px) translateY(3px);
}

チェックするとチェックの色がパタンと裏返る

ニャン易度 
<div class="cp_ipcheck07">
  <ul>
    <li class="list_item">
    <label><input type="checkbox" class="option-input07" checked />ネコ</label>
    </li>
    <li class="list_item">
    <label><input type="checkbox" class="option-input07" />イヌ</label>
    </li>
    <li class="list_item">
    <label><input type="checkbox" class="option-input07" />ウサギ</label>
    </li>
  </ul>
</div>
.cp_ipcheck07 {
  margin: 2em auto;
}
.cp_ipcheck07 ul {
  list-style: none;
}
.cp_ipcheck07 .list_item {
  margin-bottom: 10px;
}
/*ラベルの設定*/
.cp_ipcheck07 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
/*チェックボックスの設定*/
.cp_ipcheck07 .option-input07 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  /*デフォルト値を無効に*/
  border: none;
  outline: none;
  appearance: none;
}
.cp_ipcheck07 .option-input07:before,
.cp_ipcheck07 .option-input07:after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
}
.cp_ipcheck07 .option-input07:before {
  background: #ffffff;
}
.cp_ipcheck07 .option-input07:after {
  outline: 2px solid #da3c41;
  transition: all 0.3s ease-in-out;
}
/*checked時の設定*/
.cp_ipcheck07 .option-input07:checked:after {
  background: #da3c41;
  transform: rotateY(180deg);
}

チェックされた位置がわかりやすいようにホバーで文字が動く

ニャン易度 
<div class="cp_ipcheck08">
  <ul>
    <li class="list_item">
      <input type="checkbox" class="option-input" id="d_ch1" checked />
      <label for="d_ch1">ネコ</label>
    </li>
    <li class="list_item">
      <input type="checkbox" class="option-input" id="d_ch2" />
      <label for="d_ch2">イヌ</label>
    </li>
    <li class="list_item">
      <input type="checkbox" class="option-input" id="d_ch3" />
      <label for="d_ch3">ウサギ</label>
    </li>
    <li class="list_item">
      <input type="radio" class="option-input" name="cpipr08" id="c_rb4" disabled/>
      <label for="c_rb4">リス</label>
    </li>
  </ul>
</div>
.cp_ipcheck08 {
  margin: 2em auto;
}
.cp_ipcheck08 ul {
  list-style: none;
}
.cp_ipcheck08 .list_item {
  margin-bottom: 10px;
}
/*チェックボックスの設定*/
.cp_ipcheck08 .option-input {
  display: none;
}
/*ラベルの設定*/
.cp_ipcheck08 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s linear;
}
.cp_ipcheck08 label::before {
  display: block;
  width: 20px;
  height: 20px;
  content: '';
  margin-right: 20px;
  transition: all 0.25s linear;
  border: 4px solid #da3c41;
}
/*hover時のテキスト色と動き*/
.cp_ipcheck08 .list_item:hover label {
  color: #da3c41;
}
.cp_ipcheck08 .list_item:hover label::before {
  margin-right: 40px;
}
/*checked時の設定*/
.cp_ipcheck08 .option-input:checked + label {
  color: #da3c41;
}
.cp_ipcheck08 .option-input:checked + label::before {
  margin-right: 40px;
  background: #da3c41;
}
/*disabledの設定*/
.cp_ipcheck08 .option-input:disabled + label {
  color: #b8b7b7;
  cursor: not-allowed;
}
.cp_ipcheck08 .option-input:disabled + label::before {
  background: #dddddd;
  border: 4px solid #b8b7b7;
}

チェックボックスにチェックすると右にツールチップを表示

ニャン易度 
<div class="cp_ipcheck09">
  <label for="d_rb1">
    <input type="checkbox" id="d_rb1" checked />
    <div>ネコ<span>猫</span></div>
  </label>
  <label for="d_rb2">
    <input type="checkbox" id="d_rb2" />
    <div>イヌ<span>犬</span></div>
  </label>
  <label for="d_rb3">
    <input type="checkbox" id="d_rb3" />
    <div>ウサギ<span>兎</span></div>
  </label>
  <label for="d_rb4">
    <input type="checkbox" id="d_rb4" />
    <div>トリ<span>鳥</span></div>
  </label>
  <label for="d_rb5">
    <input type="checkbox" id="d_rb5" />
    <div>リス<span>栗鼠</span></div>
  </label>
</div>
.cp_ipcheck09 {
  margin: 2em auto;
}
/*ラベルの設定*/
.cp_ipcheck09 label {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.cp_ipcheck09 label input[type='checkbox'] {
  margin-right: 15px;
}
/*checked時に出る吹き出しの設定（デフォルト）*/
.cp_ipcheck09 label input[type='checkbox']:checked + div span {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  margin: 0 0 0 20px;
  padding: 2px 8px;
  color: #ffffff;
  background-color: #2e9b72;
  border-radius: 4px;
  visibility: visible;
  transition: transform 200ms ease;
  transform: translateX(0px);
}
.cp_ipcheck09 label input[type='checkbox']:checked + div span:before {
  position: absolute;
  top: 5px;
  left: -5px;
  content: '';
  width: 6px;
  height: 10px;
  background-color: #2e9b72;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
/*checked時に出る吹き出しの設定（動き）*/
.cp_ipcheck09 label div {
  position: relative;
}
.cp_ipcheck09 label div span {
  visibility: hidden;
  transform: translateX(-10px);
}
/*checked時に出る吹き出しの設定（色）*/
.cp_ipcheck09 label:nth-of-type(1) input[type='checkbox']:checked + div span,
.cp_ipcheck09 label:nth-of-type(1) input[type='checkbox']:checked + div span:before {
  background-color: #2e9b72;
}
.cp_ipcheck09 label:nth-of-type(2) input[type='checkbox']:checked + div span,
.cp_ipcheck09 label:nth-of-type(2) input[type='checkbox']:checked + div span:before {
  background-color: #36509a;
}
.cp_ipcheck09 label:nth-of-type(3) input[type='checkbox']:checked + div span,
.cp_ipcheck09 label:nth-of-type(3) input[type='checkbox']:checked + div span:before {
  background-color: #f7c735;
}
.cp_ipcheck09 label:nth-of-type(4) input[type='checkbox']:checked + div span,
.cp_ipcheck09 label:nth-of-type(4) input[type='checkbox']:checked + div span:before {
  background-color: #a62e7a;
}
.cp_ipcheck09 label:nth-of-type(5) input[type='checkbox']:checked + div span,
.cp_ipcheck09 label:nth-of-type(5) input[type='checkbox']:checked + div span:before {
  background-color: #da3c41;
}

ラジオボタンの装飾についてはこちら

copypet.jp

コピペでできる！cssとhtmlのみでフォームのラジオボタンをわかりやすくするデザイン10選 | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 ラジオボタン[input type="radio"]のデザインにエフェクトを追加することで、 今までよりワンランク上のわかりやすさを手に入れましょう。…

copypet.jp

記事を見る

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？