最近在做微信的項目，每次寫到位址的選擇，隻要用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的打賞，我們會更加努力！ 如果您想成為作者，請點我