select android低版本与ios文字居中问题_select ios 水平居中-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43462746/article/details/88242746

本文介绍了一种解决iOS与低版本安卓设备上Select元素显示问题的方法，通过使用绝对定位和透明CSS，结合span元素模仿Select样式，实现了跨平台的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始是用这两个 /* text-align: center; text-align-last: center; */ 发现ios与低版本android没有效果，是因为兼容性问题。
提供个思路，把select 设为定位，且css设透明，加个span标签样式之类改成原先select展示的样式，span的text跟select选中的value+text值绑定就行了，记得多在不同手机测测样式
附上代码

html:
 	<div class="tdOrgIdSelect" style="text-align: center;">
            <span class="virtualSelect" id="orgSelectVal"></span>
        	<select id="orgId" class="tbBillSelect StyledSelect tbBillselecthyh" ng-model="info.bill1" readonly="readonly" ng-init="info.bill1='0'" ng-change="tt2()"></select>
    </div>
css:
.tbBillselecthyh{
        /* border-radius: 50px;
        margin-left: 0px;
        /* text-align: center;
        text-align-last: center; */
        /* border: 1px solid #949494;  */
        /* background-color: transparent;
        position: absolute;
        border: 1px solid transparent; */ 
        position: absolute;
        left: 0px;
        top: 40px;
        width: 100%;
        opacity: 0;
    }
    .tdBillList #orgId {
        background-color: transparent !important;
    }
    .virtualSelect{
        /* display: none; */
        display: inline-block;
        border-radius: 50px;
        border: 1px solid #949494;
        padding: 5px;
        font-size: 16px;
        width: 95%;
        height: 34px;
        background: #fff;
        margin-top: 10px;
        -webkit-appearance: none;
    }    
js： $("#orgSelectVal").text($("#orgId").find("option:selected").text());