Definir a largura de selecionadores de data e hora html5 nativos em dispositivos iOS
Estou usando os selecionadores de data e hora nativos com type = date e type = time para a versão móvel de um site em que estou trabalhando. Os campos de entrada não estão respeitando o css que eu tenho, no entanto.
Área de Trabalho:
dispositivos iOS:
Essencialmente eu preciso das duas entradas de data e hora para preencher ~ 50% da largura. Este é o html e o css que estou usando:
<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;
}
Se alguém puder me dizer como fazer com que os espaços reservados apareçam ao usar os selecionadores de data / hora nativos, isso também seria ótimo.
Obrigado!