html5 移动端 select,移动端select兼容性问题【原创】

最近在做微信的项目，每次写到地址的选择，只要用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;

}

/* Focus style */

.custom-select select:focus {

height: 40px;

box-shadow: 0 0 1px 3px rgba(180,222,250, 1);

/*background-color:transparent;*/

/*color: #222;*/

border:1px solid #aaa;

}

/* Set options to normal weight */

.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的打赏，我们会更加努力！    如果您想成为作者，请点我