在iOS设备上设置本机html5日期和时间选择器的宽度 [英] Set width of native html5 date and time pickers on iOS devices

问题描述

我使用的类型=日期和类型=时间的移动版本的网站，我工作的原生日期和时间选择器。

桌面：

iOS设备：

本质上，我需要两个日期和时间输入来填充〜50％的宽度。这是我使用的html和css：

 < div class =arriveWrapper> 
< div class =arriveDateWrapper fieldWrapper> 
< input class =arriveDatename =arrivalDatetype =dateplaceholder =什么日期？ /> 
< / div> 
< div class =arriveTimeWrapper fieldWrapper> 
< input class =arrivalTimename =arrivalTimetype =timeplaceholder =什么时间？ /> 
< / div> 
< div class =clear>< / div> 
< / div> 
 
 
 .arriveDateWrapper {
 width：49％; 
 margin-right：2％; 
 float：left; 
 position：relative; 
} 
 
 .arriveDate {
 width：100％; 
 height：28px; 
 -moz-box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
 box-sizing：border-box; 
} 
 
 .arriveTimeWrapper {
 width：49％; 
 float：left; 
} 
 
 .arriveTime {
 width：100％; 
 height：28px; 
 -moz-box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
 box-sizing：border-box; 
} 
  

如果任何人都能告诉我如何获取占位符，

谢谢！

解决方案

  .arriveDate，.arriveTime {
 -webkit-appearance：没有; 
 -moz-appearance：none; 
} 
  

这背后的原因是IOS设备默认渲染输入使用IOS按钮

I'm using the native date and time pickers with type=date and type=time for the mobile version of a website I'm working on. The input fields are not respecting the css I have, though.

Desktop:

iOS devices:

Essentially I need the two date and time inputs to fill ~50% of the width. This is the html and css I'm using:

<div class="arriveWrapper">
            <div class="arriveDateWrapper fieldWrapper">
                <input class="arriveDate" name="arriveDate" type="date" placeholder="What date?" />
            </div>
            <div class="arriveTimeWrapper fieldWrapper">
                <input class="arriveTime" name="arriveTime" type="time" placeholder="What time?" />
            </div>
            <div class="clear"></div>
        </div>


.arriveDateWrapper {
    width: 49%;
    margin-right: 2%;
    float: left;
    position: relative;
}

        .arriveDate {
            width: 100%;
            height: 28px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

.arriveTimeWrapper {
    width: 49%;
    float: left;
}

    .arriveTime {
        width: 100%;
        height: 28px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

If anyone can tell me how to get the placeholders to show up when using the native date/time pickers that would be great, as well.

Thanks!

解决方案

Just add this to your styles

.arriveDate, .arriveTime  {
  -webkit-appearance: none;
  -moz-appearance: none;
}

The reason behind this is that IOS device render by default the inputs using the IOS buttons

这篇关于在iOS设备上设置本机html5日期和时间选择器的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！