实现效果：

样式一：去除边框和下拉三角形，自定义下拉三角形

下拉三角形图片获取

代码实现：

HTML代码

    
      
                 食宿            包吃住            包吃            包住        
    

CSS代码

.com-sel {    line-height: 5rem;    cursor: pointer;        /*鼠标上移变成小手*/}.com-opt {    padding-right: 1.8rem;    color: #afbac0;    font-size: 1.6rem;    border: none;    outline: none;    /*去掉默认的下拉三角*/    appearance:none;      -moz-appearance:none;      -webkit-appearance:none;    /*添加下拉三角图标*/    background: url("../img/task5-2_07.jpg") no-repeat right center transparent;}

样式二： 去除默认三角形添加自定义图片

图片获取

代码实现：

HTML代码

    
      
                 查看详情            方形            圆形            锥形        
    

CSS代码

.com-sel {    line-height: 3rem;    cursor: pointer;        /*鼠标上移变成小手*/}.com-opt {    width: 10%;    color: #999;    /*去掉默认的下拉三角*/    appearance:none;      -moz-appearance:none;      -webkit-appearance:none;    /*添加下拉三角图标*/   background: url("../img/tranger.jpg") no-repeat right center transparent;}