Ustaw szerokość natywnych znaczników daty i czasu html5 na urządzeniach z systemem iOS

Question

Używam natywnych selektorów daty i czasu z typem = data i typ = czas dla wersji mobilnej witryny, nad którą pracuję. Pola wejściowe nie respektują jednak posiadanego css.

Pulpit:

urządzeń iOS:

Zasadniczo muszę dwa wejścia daty i czasu, aby wypełnić ~ 50% szerokości. To jest HTML i CSS Używam:

<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; 
    } 

Jeśli ktoś może mi powiedzieć jak uzyskać zastępcze, aby pokazać się przy użyciu rodzimych zbieraczy data/czas, że byłoby świetnie, jak również.

Dzięki!

Answer 1

Wystarczy dodać to do swoich stylów

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

Powodem tego jest to, że urządzenie IOS czyni domyślnie wejść za pomocą przycisków IOS

Answer 2

Aby uniknąć utraty jakichkolwiek elementów stylu stosowane do innych pól wejściowych, użyj tekstfield zamiast none.

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

Ponadto, jeśli po prostu chcesz, aby wszystkie pola data wyglądają jak pola tekstowe, ale nadal działa jak polach data ...

input[type="date"] 
{ 
    display:block; 
    -webkit-appearance: textfield; 
    -moz-appearance: textfield; 
    min-height: 1.2em; 
}