コピペでできる！cssとhtmlのみでフォームのラジオボタンをわかりやすくするデザイン9選

CSS HTML
 
 

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

browser:  ✔︎ ✔︎ ✔︎ 

フォームのラジオボタンをわかりやすくするデザイン[9種]

シンプルなラジオボタン

ニャン易度 
<div class="cp_ipradio01">
  <input type="radio" id="radio1" name="cpipr01" />
  <label for="radio1">ネコ</label>
  <input type="radio" id="radio2" name="cpipr01" />
  <label for="radio2">イヌ</label>
  <input type="radio" id="radio3" name="cpipr01" />
  <label for="radio3">ウサギ</label>
  <input type="radio" id="radio4" name="cpipr01" disabled/>
  <label for="radio4">トリ</label>
</div>
.cp_ipradio01 input[type=radio] {
  display: none;
}
/*focus・hover・active・checked時のラベルの色*/
.cp_ipradio01 label:focus,
.cp_ipradio01 label:hover,
.cp_ipradio01 label:active,
.cp_ipradio01 input:checked + label {
  color: #da3c41;
}
/*focus・hover・active・checked時のラジオボタンの色*/
.cp_ipradio01 label:focus:before,
.cp_ipradio01 label:hover:before,
.cp_ipradio01 label:active:before,
.cp_ipradio01 input:checked + label:before {
  border-color: #da3c41;
  background: #ffffff;
}
/*通常時のラベルの色*/
.cp_ipradio01 label {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1em 1em 1em 3em;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;/*テキストがエリアを超えたら'…'で省略*/
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s ease;
}
/*通常時のラジオボタンの色*/
.cp_ipradio01 label:before {
  position: absolute;
  left: 1em;
  content: '';
  width: 10px;
  height: 10px;
  border: 3px solid #cccccc;
  border-radius: 50%;
}
/*チェック時の設定*/
.cp_ipradio01 input:checked + label:before {
  border-color: #da3c41;
  background: #da3c41;
}
/*無効の設定*/
.cp_ipradio01 input:disabled + label {
  color: rgba(0, 0, 0, 0.5);
  background: #efefef;
  cursor: not-allowed;
}
.cp_ipradio01 input:disabled + label:hover {
  border-color: rgba(0, 0, 0, 0.1);
}
.cp_ipradio01 input:disabled + label:before {
  border-color: #ffffff;
  background: #ffffff;
}

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

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

チェックした時にラジオボタンが文字を覆う

ニャン易度 
<div class="cp_ipradio03">
  <input type="radio" name="cpipr03" id="a_rb1" />
  <label for="a_rb1">ネコ</label>
  <input type="radio" name="cpipr03" id="a_rb2" />
  <label for="a_rb2">イヌ</label>
  <input type="radio" name="cpipr03" id="a_rb3" />
  <label for="a_rb3">ウサギ</label>
</div>
.cp_ipradio03 {
  margin: 2em auto;
  display: flex;
}
/*デフォルトのラジオボタンの設定*/
.cp_ipradio03 input[type='radio'] {
  display: none;
}
/*通常時のラジオボタンの設定*/
.cp_ipradio03 label {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 20px;
  padding-left: 35px;
  padding-right: 10px;
  cursor: pointer;
  z-index: 99;
}
.cp_ipradio03 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_ipradio03 label,
.cp_ipradio03 label::before {
  transition: 0.25s all ease;
}
/*ラジオボタンの設定*/
.cp_ipradio03 input[type='radio'] + label::before {
  border-radius: 20px;
}
/*checked時のサイズと色の設定*/
.cp_ipradio03 input[type='radio']:checked + label {
  padding-left: 10px;
  color: #ffffff;
}
.cp_ipradio03 input[type='radio']:checked + label::before {
  width: 100%;
  height: 100%;
  background: #da3c41;
}

スイッチのようなラジオボタン

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

チェックが移動する時にぴょこんと動く

ニャン易度 
<div class="cp_ipradio05">
  <ul>
    <li class="list_item">
      <label><input type="radio" class="option-input"  name="cpipr05" checked>ネコ</label>
    </li>
    <li class="list_item">
      <label><input type="radio" class="option-input" name="cpipr05">イヌ</label>
    </li>
    <li class="list_item">
      <label><input type="radio" class="option-input" name="cpipr05">ウサギ</label>
    </li>
  </ul>
</div>
.cp_ipradio05 {
  margin: 2em auto;
}
.cp_ipradio05 ul {
  list-style: none;
}
.cp_ipradio05 .list_item {
  margin-bottom: 10px;
}
/*ラベルの設定*/
.cp_ipradio05 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
/*ラジオボタンの設定*/
.cp_ipradio05 .option-input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  /*デフォルト値を無効に*/
  border: none;
  outline: none;
  appearance: none;
}
.cp_ipradio05 .option-input:before,
.cp_ipradio05 .option-input:after {
  position: absolute;
  content: '';
  border-radius: 50%;
}
.cp_ipradio05 .option-input:before {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 2px solid #e5e5e5;
}
.cp_ipradio05 .option-input:after {
  display: block;
  width: 16px;
  height: 16px;
  background: #da3c41;
  transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);/*ぴょこんの動き*/
  transform: scale(0, 0);
}
/*checked時の設定*/
.cp_ipradio05 .option-input:checked:after {
  transform: scale(1, 1);
}

チェックするとラジオの色が外側から替わる

ニャン易度 
<div class="cp_ipradio06">
  <ul>
    <li class="list_item">
      <label><input type="radio" class="option-input" name="cpipr06" checked >ネコ</label>
    </li>
    <li class="list_item">
      <label><input type="radio" class="option-input" name="cpipr06">イヌ</label>
    </li>
    <li class="list_item">
      <label><input type="radio" class="option-input" name="cpipr06">ウサギ</label>
    </li>
  </ul>
</div>
.cp_ipradio06 {
  margin: 2em auto;
}
.cp_ipradio06 ul {
  list-style: none;
}
.cp_ipradio06 .list_item {
  margin-bottom: 10px;
}
/*ラベルの設定*/
.cp_ipradio06 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
/*ラジオボタンの設定*/
.cp_ipradio06 .option-input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  /*デフォルト値を無効に*/
  border: none;
  outline: none;
  appearance: none;
}
.cp_ipradio06 .option-input:before,
.cp_ipradio06 .option-input:after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.cp_ipradio06 .option-input:before {
  background: #ffffff;
}
.cp_ipradio06 .option-input:after {
  outline: 2px solid #da3c41;
  transition: all 0.3s ease-in-out;
}
/*checked時の設定*/
.cp_ipradio06 .option-input:checked:after {
  outline: 12px solid #da3c41;
  outline-offset: -10px;
}

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

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

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

ニャン易度 
<div class="cp_ipradio08">
  <ul>
    <li class="list_item">
      <input type="radio" class="option-input" name="cpipr08" id="c_rb1" />
      <label for="c_rb1">ネコ</label>
    </li>
    <li class="list_item">
      <input type="radio" class="option-input" name="cpipr08" id="c_rb2" />
      <label for="c_rb2">イヌ</label>
    </li>
    <li class="list_item">
      <input type="radio" class="option-input" name="cpipr08" id="c_rb3" />
      <label for="c_rb3">ウサギ</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_ipradio08 {
  margin: 2em auto;
}
.cp_ipradio08 ul {
  list-style: none;
}
.cp_ipradio08 .list_item {
  margin-bottom: 10px;
}
/*ラジオボタンの設定*/
.cp_ipradio08 .option-input {
  display: none;
}
/*ラベルの設定*/
.cp_ipradio08 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s linear;
}
.cp_ipradio08 label::before {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 20px;
  content: '';
  transition: all 0.25s linear;
  border: 4px solid #da3c41;
  border-radius: 50%;
}
/*hover時のテキスト色と動き*/
.cp_ipradio08 .list_item:hover label {
  color: #da3c41;
}
.cp_ipradio08 .list_item:hover label::before {
  margin-right: 40px;
}
/*checked時の設定*/
.cp_ipradio08 .option-input:checked + label {
  color: #da3c41;
}
.cp_ipradio08 .option-input:checked + label::before {
  margin-right: 40px;
  background: #da3c41;
}
/*disabledの設定*/
.cp_ipradio08 .option-input:disabled + label {
  color: #b8b7b7;
  cursor: not-allowed;
}
.cp_ipradio08 .option-input:disabled + label::before {
  border: 4px solid #b8b7b7;
}

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

ニャン易度 
<div class="cp_ipradio09">
  <label for="d_rb1">
    <input type="radio" id="d_rb1" name="cpipr09" value="" />
    <div>ネコ<span>猫</span></div>
  </label>
  <label for="d_rb2">
    <input type="radio" id="d_rb2" name="cpipr09" value="" />
    <div>イヌ<span>犬</span></div>
  </label>
  <label for="d_rb3">
    <input type="radio" id="d_rb3" name="cpipr09" value="" />
    <div>ウサギ<span>兎</span></div>
  </label>
  <label for="d_rb4">
    <input type="radio" id="d_rb4" name="cpipr09" value="" />
    <div>トリ<span>鳥</span></div>
  </label>
  <label for="d_rb5">
    <input type="radio" id="d_rb5" name="cpipr09" value="" />
    <div>リス<span>栗鼠</span></div>
  </label>
</div>
.cp_ipradio09 {
  margin: 2em auto;
}
/*ラベルの設定*/
.cp_ipradio09 label {
  position: relative;
  display: flex;
  align-items: center;
}
.cp_ipradio09 label input[type='radio'] {
  margin-right: 15px;
}
/*checked時に出る吹き出しの設定（デフォルト）*/
.cp_ipradio09 label input[type='radio']: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_ipradio09 label input[type='radio']: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_ipradio09 label div {
  position: relative;
}
.cp_ipradio09 label div span {
  visibility: hidden;
  transform: translateX(-10px);
}
/*checked時に出る吹き出しの設定（色）*/
.cp_ipradio09 label:nth-of-type(1) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(1) input[type='radio']:checked + div span:before {
  background-color: #2e9b72;
}
.cp_ipradio09 label:nth-of-type(2) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(2) input[type='radio']:checked + div span:before {
  background-color: #36509a;
}
.cp_ipradio09 label:nth-of-type(3) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(3) input[type='radio']:checked + div span:before {
  background-color: #f7c735;
}
.cp_ipradio09 label:nth-of-type(4) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(4) input[type='radio']:checked + div span:before {
  background-color: #a62e7a;
}
.cp_ipradio09 label:nth-of-type(5) input[type='radio']:checked + div span,
.cp_ipradio09 label:nth-of-type(5) input[type='radio']:checked + div span:before {
  background-color: #da3c41;
}

チェックボックスの装飾についてはこちら

copypet.jp

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

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

copypet.jp

記事を見る

copypet.jp

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

More Info

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