<div class="container">
  <div id="output" class="">aa</div>
  <form id="radiolist" onclick="showColor()">
    <div class="radio-box">
      <input type="radio" id="red" name="color" value="red" checked>
      <label for="red" class="is-red"><p>red</p></label>
    </div>

    <div class="radio-box">
      <input type="radio" id="blue" name="color"  value="blue">
      <label for="blue" class="is-blue"><p>blue</p></label>
    </div>

    <div class="radio-box">
      <input type="radio" id="yellow" name="color"  value="yellow">
      <label for="yellow" class="is-yellow"><p>yellow</p></label>
    </div>
  </form>
</div>
html {
  height: 100%;
}

body {
   font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
  background: linear-gradient(#f0fff0, #f2f3fb);
  height: 100%;
  margin: 0;
}

.container {
  text-align: center;
}

#output {
  display: inline-block;
  font-size: 70px;
  font-weight: bold;
  width: 350px;
  height: 110px;
  margin: 5px;
  color: rgb(230, 148, 176);
  border: solid 4px rgb(230, 148, 176);
  border-radius: 20px;
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
}

.radio-box {
  display: inline-block;
  position: relative;
  margin: 0px;
}

.radio-box input[type=radio] {
  display: none;
}

.radio-box label {
  color: #fff;
  cursor: pointer;
  display: inline-block;
  width: 35px;
  height: 20px;
  padding: 8px 26px; 
  border-radius: 10px;
  margin-right: 14px;
  margin-left: 14px;
  background: #ccc;
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  z-index: 102;
}

.radio-box label::before{
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 26px;
  height: 26px;
  border-radius: 20%;
  background: #ccc;
  transform: rotate(45deg);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  z-index: 101;
}

.radio-box label::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 5px;
  width: 26px;
  height: 26px;
  border-radius: 20%;
  background: #ccc;
  transform: rotate(45deg);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  z-index: 101;
}

.radio-box p {
  padding: 0px;
  margin: 0px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 103;
}

.radio-box p::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  width: 26px;
  height: 26px;
  border-radius: 20%;
  background: #fff;
  transform: rotate(45deg);
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
  z-index: 103;
}

.radio-box input[type=radio]:checked + label.is-red,
.radio-box input[type=radio]:checked + label.is-red::before,
.radio-box input[type=radio]:checked + label.is-red::after {
  background: rgb(230, 148, 176);
}

.radio-box input[type=radio]:checked + label.is-blue,
.radio-box input[type=radio]:checked + label.is-blue::before,
.radio-box input[type=radio]:checked + label.is-blue::after {
  background: rgb(120, 179, 240);
}

.radio-box input[type=radio]:checked + label.is-yellow,
.radio-box input[type=radio]:checked + label.is-yellow::before,
.radio-box input[type=radio]:checked + label.is-yellow::after {
  background: rgb(251, 225, 142);
}

.radio-box input[type=radio]:checked + label>p:before {
  left: 100%;
  margin-left: -36px;
  transform: rotate(225deg);
}


const radioElm = document.getElementById("radiolist");
const output = document.getElementById("output");

const color = {
  'red': 'rgb(230, 148, 176)',
  'blue': 'rgb(120, 179, 240)',
  'yellow': 'rgb(255, 225, 142)'
};

output.innerHTML = radioElm.color.value;

function showColor() {
  let colorValue = radioElm.color.value;
  if(radioElm.color){
    output.style.color = color[colorValue];
    output.style.border = "solid 4px " + color[colorValue];
    output.innerHTML = colorValue;
  } else {
    output.style.border = " ";
    output.innerHTML = " ";
  }
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.