主要用的是
-webkit-appearance: none;/*兼容苹果手机*/
这是一个小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sel{
position: relative;
width: 100px;
}
select{
-webkit-appearance: none;/*兼容苹果手机*/
border: 1px solid #EBEBEB;
width: 100px;
height: 25px;
line-height: 25px;
/*防止紧紧靠在边上*/
text-indent: 2px;
background-color: transparent;
}
.jt {
display: inline-block;
position: absolute;
right: 2%;
top: 0;
height: 25px;
width: 20px;
background-image:url(images/jiantou.png);
background-size: 150%;
background-position: center -10px;
z-index: -1000;
}
</style>
</head>
<body>
<div class="sel">
<select>
<option>请选择</option>
<option>9:30-10:30</option>
<option>10:30-11:30</option>
<option>11:30-12:30</option>
<option>12:30-13:30</option>
<option>13:30-14:30</option>
<option>14:30-15:30</option>
<option>15:30-16:30</option>
</select>
<span class="jt"></span>
</div>
</body>
</html>
运行后是
小三角的图标是
获取小三角的链接是