新手！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>

新手！html中的select的文字在ios浏览器上不居中问题！

新手！html中的select的文字在ios浏览器上不居中问题！

效果见下：

html代码:

相关推荐