解决ios手机select下拉选择不居中问题

思路：select选择后赋值给span，select字体设置透明，span要设置不可点击

html5代码

<div class="page" style="position: relative;">
    <span disabled>第 1 页</span>
    <select id='pageIndex' onclick="hasSelect()" onchange='pageChange(this.value)' style="opacity: 0;position: absolute;width: 100%;height: 100%;top: 0;left: 0;">
        <!-- <option value="1">第 1 页</option> -->
    </select>
</div>

js代码

$(function(){
	initSelect()
})
function initSelect(){ //初始化select中的option
    var index = 100 //页数
    var str ="";
    for(var i=0;i<index;i++){
        str += '<option value="'+(i+1)+'"> 第 '+(i+1)+' 页 </option>';
    }
    $("#pageIndex").html(str);
}
function pageChange(val){ //更改选项
    $(".page span").text("第 " + val + " 页")
}
function hasSelect(){ //显示上次已选选项
    $('#pageIndex')[0].selectedIndex = -1; //取消默认选择第一项（解决第一项无法选择）
}

css3代码

.page{
    display: inline-block;
    margin: auto;
    text-align: center;
    border-bottom: 1.5px solid #000;
}
.page select{
    border: none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    outline: none;
    background: none;
    text-align: center;
    text-align-last: center;/*兼容chrome*/
    font-size: .24rem;
}
.page span{
    font-size: .24rem;
}
select option{
    text-align: center;
}

上面是动手实现的效果，亲测可行~，截图展示效果

下面是冲浪找到的思路启发文章

启发文章：
【https://blog.csdn.net/shuishuixiaoping/article/details/86240036】
【https://bbs.csdn.net/topics/391814220】