Установите ширину собственных наборов даты и времени html5 на устройствах iOS.

Я использую собственные сборщики дат и времени с типом = дата и тип = время для мобильной версии веб-сайта, над которым я работаю. Поля ввода не относятся к css, которые у меня есть.

Desktop:

Desktop

устройства iOS: enter image description here

По существу мне нужны два входа даты и времени, чтобы заполнить ~ 50% от ширины. Это html и css, которые я использую:

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

Если кто-нибудь может сказать мне, как заставить заполнители появляться при использовании собственных наборов даты и времени, которые также будут полезны.

Спасибо!

Ответы

Ответ 1

Просто добавьте это в свои стили

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

Причиной этого является то, что устройство IOS визуализирует по умолчанию входы с помощью кнопок IOS

Ответ 2

Чтобы избежать потери элементов стиля, применяемых к другим полям ввода, используйте текстовое поле вместо none.

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

Кроме того, если вы просто хотите, чтобы все поля даты отображались как текстовые поля, но все же работали как поля даты...

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