Establecer el ancho de los selectores de fecha y hora html5 nativos en dispositivos iOS

Estoy usando los selectores nativos de fecha y hora con type=date y type=time para la versión móvil de un sitio web en el que estoy trabajando. Sin embargo, los campos de entrada no respetan el css que tengo.

Escritorio:

Dispositivos iOS:

Esencialmente, necesito las dos entradas de fecha y hora para llenar ~50% del ancho. Este es el html y css que estoy 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;
    }

Si alguien puede decirme cómo hacer que aparezcan los marcadores de posición al usar los selectores nativos de fecha/hora, también sería genial.

¡Gracias!

Solo agrega esto a tus estilos

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

La razón detrás de esto es que el dispositivo IOS procesa por defecto las entradas usando los botones IOS

Para evitar perder los elementos de estilo aplicados a otros cuadros de entrada, use campo de texto en lugar de ninguno.

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

Además, si solo desea que todos los campos de fecha aparezcan como cuadros de texto pero aún funcionen como campos de fecha…

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