最近在做微信的项目，每次写到地址的选择，只要用select，在手机上总会出现这样那样的不兼容问题，经过多次查资料，终于找到一个可以用的方法，具体代码如下：
弋江区
所在地址
.list-bottom .district{
display: inline-block;
float: right;
margin-right: 10px;
text-align: right;
font-size: 14px;
color: #808080;
cursor: pointer;
}
.button {
border: none;
border-radius: 1px;
}
.custom-select {
position: relative;
}
.custom-select select {
width:100%;
margin:0;
background:none;
border: 1px solid transparent;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
line-height:1.3;
}
.custom-select::after {
content: "";
position: absolute;
width: 0px;
height: 0px;
top: 50%;
right: -9px;
margin-top:-4px;
border:8px solid #929497;
border-width: 8px 5px 8px;
border-color: #929497 transparent transparent transparent;
z-index: 2;
pointer-events:none;
}
.custom-select select:focus {
height: 40px;
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
border:1px solid #aaa;
}
.custom-select option {
font-weight:normal;
}
x:-o-prefocus, .custom-select::after {
display:none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.custom-select select::-ms-expand {
display: none;
}
.custom-select select:focus::-ms-value {
background: transparent;
color: #222;
}
}
@-moz-document url-prefix() {
.custom-select {
overflow: hidden;
}
.custom-select select {
width: 120%;
width: -moz-calc(100% + 3em);
width: calc(100% + em);
}
}
.custom-select select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/15866.html
微信打赏
支付宝打赏
感谢您对作者erin的打赏，我们会更加努力！ 如果您想成为作者，请点我