下拉菜单效果问题

Question

请问右边的灰色效果用什么来实现。目前我是这样写 <select class="form-control" id="college_list">                            <option value="0">您所在的学院</option>                            <option class="college_list" value="1">电子与通信工程学院</option>                            <option class="college_list" value="2">机电工程学院</option>                            <option class="college_list" value="3">经济学院</option>                            <option class="college_list" value="4">应用化学与生物学院</option>                            <option class="college_list" value="5">汽车与交通学院</option>                            <option class="college_list" value="6">数创学院</option>                            <option class="college_list" value="7">医学技术与护理学院</option>                            <option class="college_list" value="8">管理学院</option>                            <option class="college_list" value="9">艺术设计学院</option>                            <option class="college_list" value="10">建筑与环境工程学院</option>                            <option class="college_list" value="11">应用外语学院</option>                            <option class="college_list" value="12">计算机学院</option>                            <option class="college_list" value="13">媒体与传播学院</option>                            <option class="college_list" value="14">人文学院</option>                            <option class="college_list" value="15">创业学院</option>                        <select>                                      

Answer 1

你这个用select是实现不了的，可以用div搭框架

Answer 2

使用appearance设置无右侧图标，然后设置一定的padding-right，最后使用background设置新图标到右侧即可：

select{
-webkit-appearance: none;
padding-right: 10px;
background-image:url(photo.jpg);
background-size: 5px 5px;
background-position:right center;
background-repeat:no-repeat;
}