CSS使单选按钮变为普通button的样子选中变色

css

*{
  margin: 0;
  padding: 0;
}
body{
  background: #f1f1f1;
}
li{
  list-style: none;
}
.item {
  width: 80px;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  overflow: hidden;
  float: left;
  text-align: center;
  margin-bottom: 10px;
}
.item .type {
  height: 41px;
  line-height: 41px;
  text-align: center;
  background-color: #fff;
  font-size: 15px;
  display: block;
  margin: 0 5px;
}
.radio {
  position: absolute;
  top: -9999px;
}
.item .type span {
  height: 39px;
  display: block;
  border: 1px solid #fff;
  display: block;
  position: relative;
}
 .item .radio:checked ~ span {
  color: #74c742;
  border-color: #74c742;
}

<div style="width:300px">
<h1 style="">请选择教授的科目：</h1>
  <ul>
    <li class="item">
     <label class="type">
      <input type="radio" class="radio" name="style" value="4">
      <span>语文<i class="check-icon"></i></span>
    </label>
    </li>
    <li class="item">
    <label class="type">
      <input type="radio" class="radio" name="style" value="4">
      <span>数学<i class="check-icon"></i></span>
    </label>
    </li>
    <li class="item">
    <label class="type">
      <input type="radio" class="radio" name="style" value="4">
      <span>英语<i class="check-icon"></i></span>
    </label>
    </li>
 </ul>
 <ul>
  <li class="item">
    <label class="type">
      <input type="radio" class="radio" name="style" value="4">
      <span>物理<i class="check-icon"></i></span>
    </label>
  </li>
  <li class="item">
    <label class="type">
      <input type="radio" class="radio" name="style" value="4">
      <span>化学<i class="check-icon"></i></span>
    </label>
  </li>
  <li class="item">
    <label class="type">
      <input type="radio" class="radio" name="style" value="4">
      <span>生物<i class="check-icon"></i></span>
    </label>
  </li>
 </ul>
 <ul>
  <li class="item">
    <label class="type">
      <input type="radio" class="radio" name="style" value="4">
      <span>政治<i class="check-icon"></i></span>
    </label>
  </li>
  <li class="item">
    <label class="type">
      <input type="radio" class="radio" name="style" value="4">
      <span>历史<i class="check-icon"></i></span>
    </label>
  </li>
  <li class="item">
    <label class="type">
      <input type="radio" class="radio" name="style" value="4">
      <span>地理<i class="check-icon"></i></span>
    </label>
  </li>
 </ul>
</div>