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

最新推荐文章于 2023-08-22 10:26:34 发布

原创最新推荐文章于 2023-08-22 10:26:34 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5 #css3 #jquery

分享同时被 3 个专栏收录

40 篇文章

订阅专栏

实践

30 篇文章

订阅专栏

前端技术

13 篇文章

订阅专栏

本文介绍了一种解决iOS设备上select下拉选择框不居中的方法，通过将选择结果赋值给span元素，并设置select字体透明，同时使span不可点击，配合HTML5、JS及CSS3代码实现下拉菜单的居中显示。

解决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;
}