移动端select兼容

在这次的新年活动中，由于要绑定区服角色，这里用到了select标签，但是select在不同的浏览器中的样式不同，尤其是在苹果手机中，默认样式更是丧心病狂，所以在这里我们必须修改css来令select兼容。html结构如图1。

图1  html结构

css修改如图2和图3。

图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;

        }

溜了溜了