修改复选框select的默认样式

//html
<p>
   <select>
      <option value="volvo">aabb</option>
   </select>
</p>

//css
p:nth-child(3){
    border:1px solid #868686;
    position: relative;
  &:after{
    content: "";
    width: .1867rem;
    height: 0.16rem;
    //倒三角这里用一张图片
    background: url("../../../static/icon/Path7@2x.png") no-repeat center;
    position: absolute;
    right: 10%;
    top: 40%;
    background-size: contain;
    }
}

select{
      border: none;
      //清除select聚焦时候的边框颜色
      outline: none;
      //隐藏select的下拉图标
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 1.573rem;
      height: .53rem;
      box-sizing: border-box;
      padding-left: .1rem;
      color:#868686;
  }

效果图为：

思路是这样的：

①去除select的默认样式

②为p元素添加一个伪类，伪类的背景为一个倒三角图片