<div class="cp_ipselect08">
<ul class="cp_sl08">
  <li>
    <input class="cp_sl08_close" type="radio" name="awesomeness" id="close" value=""/>
    <span class="cp_sl08_label cp_sl08_placeholder">Choose</span>
  </li>
  <li class="cp_sl08_items">
    <input class="cp_sl08_expand" type="radio" name="option08" id="opener"/>
    <label class="cp_sl08_closeLabel" for="close"></label>
    <ul class="cp_sl08_options">
      <li>
        <input class="cp_sl08_input" type="radio" name="option08" id="cat"/>
        <label class="cp_sl08_label" for="cat">cat</label>
      </li>
      <li>
        <input class="cp_sl08_input" type="radio" name="option08" id="dog"/>
        <label class="cp_sl08_label" for="dog">dog</label>
      </li>
      <li>
        <input class="cp_sl08_input" type="radio" name="option08" id="rabbit"/>
        <label class="cp_sl08_label" for="rabbit">rabbit</label>
      </li>
      <li>
        <input class="cp_sl08_input" type="radio" name="option08" id="squirrel"/>
        <label class="cp_sl08_label" for="squirrel">squirrel</label>
      </li>
    </ul>
    <label class="cp_sl08_expandLabel" for="opener"></label>
  </li>
</ul>
</div>

.cp_ipselect08 * {
  position: relative;
  margin: 0;
  padding: 0;
}
.cp_sl08 {
  display: block;
  width: 100%;
  margin: 2em auto;
  cursor: pointer;
}
/*ラジオボタンの制御*/
.cp_ipselect08 input {
  margin: 0;
  background: transparent;
  outline: none;
  border: none;
  appearance: none;
  display:none;
}
.cp_sl08_input,
.cp_sl08_close {
  display: none;
}
.cp_ipselect08 ul {
  list-style: none;
  padding: 0;
}
.cp_sl08_expand {
  position: relative;
  top: 0;
  right: 0;
  width: 0;
  height: 40px;
}
/*プルダウンの三角を設定*/
.cp_sl08_expandLabel,
.cp_sl08_closeLabel {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.cp_sl08_expandLabel {
  display: block;
}
.cp_sl08_expandLabel::after {
  position: absolute;
  top: 1.2em;
  right: 0.5em;
  content: '';
  width: 16px;
  height: 8px;
  background: #aaa;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: all 250ms cubic-bezier(0.4,0.25,0.3,1);
  z-index: 2;
  opacity: 0.6;
}
.cp_sl08_closeLabel {
  display: none;
}
.cp_sl08_closeLabel::after {
  position: absolute;
  top: 1.2em;
  right: 0.5em;
  content: '';
  width: 16px;
  height: 8px;
  background: #aaa;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  transition: all 250ms cubic-bezier(0.4,0.25,0.3,1);
  z-index: 2;
  opacity: 0.6;
}
/*選択肢部分*/
.cp_sl08_items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 2px solid #da3c41;
  border-radius: 2px;
  padding-top: 40px;
}
.cp_sl08_label {
  display: flex;
  align-items: center;
  height: 0;
  overflow: hidden;
  padding-left: 20px;
  color: #3e3e3e;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.4,0.25,0.3,1);
}
.cp_sl08_placeholder {
  height: 40px;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.6;
  background-color: transparent;
}
/*ラジオボタンにチェックが入った時の処理*/
.cp_sl08_expand:checked + .cp_sl08_closeLabel {
  display: block;
}
.cp_sl08_expand:checked + .cp_sl08_closeLabel + .cp_sl08_options .cp_sl08_label {
  height: 40px;
}
.cp_sl08_expand:checked + .cp_sl08_closeLabel + .cp_sl08_options .cp_sl08_label:hover {
  background-color: #f7f7f7;
}
.cp_sl08_expand:checked + .cp_sl08_closeLabel + .cp_sl08_options + .cp_sl08_expandLabel {
  display: none;
}
.cp_sl08_input:checked + .cp_sl08_label {
  height: 40px;
  margin-top: -40px;
}