select android低版本与ios文字居中问题

版权声明:每天都要加油鸭 https://blog.csdn.net/weixin_43462746/article/details/88242746

开始是用这两个 /* 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());

猜你喜欢

转载自blog.csdn.net/weixin_43462746/article/details/88242746