在这次的新年活动中，由于要绑定区服角色，这里用到了select标签，但是select在不同的浏览器中的样式不同，尤其是在苹果手机中，默认样式更是丧心病狂，所以在这里我们必须修改css来令select兼容。html结构如图1。
css修改如图2和图3。
.custom-select {
position: relative;
select {
width: 60%;
height: 1.09rem;
margin: 0.31rem auto 0;
padding-left: 3%;
border: 0;
outline: none;
border:1px solid #aaa;
border-radius: 0.31rem;
background:none;
// border: 1px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 0.5rem;
&:focus {
outline:none;
box-shadow: 0 0 1px 3px rgba(217,222,250, 1);
background-color:transparent;
color: #222;
border:1px solid #aaa;
}
}
}
.custom-select::after {
content: "";
position: absolute;
width: 0px;
height: 0px;
top: 50%;
right: 22%;
// margin-top:-0.7rem;
border:8px solid #929497;
border-width: 8px 5px 8px;
border-color: #929497 transparent transparent transparent;
z-index: 2;
pointer-events:none;
}
.custom-select option {
font-weight:normal;
}
x:-o-prefocus, .custom-select::after {
display:none;
}
溜了溜了
