新手！html中的select的文字在ios浏览器上不居中问题！
新手！html中的select的文字在ios浏览器上不居中问题！
新手第一次实现一个简单html网页，用到select选择器，选择时间，pc端和android手机端都能正常显示，但是在ios上，选中的内容不能居中。后来看到https://lvsenlin.iteye.com/blog/1978514这篇博客，他的基本实现思路就是通过一个框架布局，将select和span放在同一个位置，然后隐藏掉select，然后将选中的内容显示在span上，来实现居中，但是出现一个问题，select不能点击。沿着这个思路，解决了不能点击的问题就ok了。
效果见下： 
html代码:
<!DOCTYPE html>
<html>
<head><title>测试</title><meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no,"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><script type="text/javascript" >var TIME_OPTIONS=['请选择时间段','周六上午9:00-10:00','周六下午2:00-3:00','周日上午9:00-10:00','周日下午2:00-3:00'];function ShowToText() {var time_select = document.getElementById('time_select').value;var select_value = document.getElementById('select_value');if (time_select != 0){select_value.style.color ='#000000';select_value.innerHTML = TIME_OPTIONS[time_select];} else{select_value.style.color ='#C7C7CC';select_value.innerHTML = TIME_OPTIONS[0];}}</script><style>.content{width: -webkit-fill-available;text-align: center;padding:0;border:0;}.ui-select { width: 80%;height: 40px;margin-top: 20px;margin-left: 10%;line-height: 40px;text-align: center;border:0px;border-radius: 5px; background-color: #F5F6F8;position:relative; } .ui-select :focus{background-color: rgba(0, 0, 0, 0)}.ui-select select { position: absolute; left: 10px; top: 0px; width: 100%; height: 100%; appearance:none;-moz-appearance:none; /* Firefox */-webkit-appearance:none;color: rgba(0, 0, 0, 0);border: 0px;outline: none;background-color:rgba(255,0,0,0)} .ui-select span { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; font-size: 14px;color: #C7C7CC;} .option-style{color: #000000;}</style>
</head>
<body>
<div class="content"><div class="ui-select"> <span id='select_value' disabled >请选择时间段</span> <select id='time_select' onchange="ShowToText()"> <option class='option-style' value ="0" disabled selected>请选择时间段</option><option class='option-style' value="1">周六上午9:00-10:00</option><option class='option-style' value="2">周六下午2:00-3:00</option><option class='option-style' value="3">周日上午9:00-10:00</option><option class='option-style' value="4">周日下午2:00-3:00</option></select> </div> </div>
</body>
</html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！