css radio button design

radio_button_01.css

.radio-box1{
  display: flex;
}
.radio1{
  display: none;
}
.label-radio1{
  padding: 2px 8px;
  border: 1px solid #3498DB;
  color: #3498DB;
  cursor: pointer;
}
.label-radio1:nth-of-type(n+2){
  border-left: none;
}
.radio1:checked + .label-radio1{
  background-color: #3498DB;
  color: #fff;
}

radio_button_01.html

<div class="radio-box1">
  <input class="radio1" name="fruits" id="apple" type="radio" checked>
  <label for="apple" class="label-radio1">りんご</label>
  <input class="radio1" name="fruits" id="banana" type="radio">
  <label for="banana" class="label-radio1">バナナ</label>
  <input class="radio1" name="fruits" id="satsuma" type="radio">
  <label for="satsuma" class="label-radio1">みかん</label>
  <input class="radio1" name="fruits" id="peach" type="radio">
  <label for="peach" class="label-radio1">もも</label>
</div>