iOS safari messes up input type = date

Я использую HTML 5's <input type="date" />. Прекрасно работает в разных браузерах, но всегда есть тот, кто портит все вверх:iOS safari messes up input type = date

See the date fields get shrinked on the required size

Проблема Настоящим является размер поля: Использование Bootstrap v3.2 для проектирования, эти входы в форме и иметь class="form-control", который должен сделать их более широкими (в качестве текстового ввода выше и выбора ниже).

Есть ли способ сказать iOS, что датапикер должен быть на 100% шире? style="width:100%" ничего не делает. width:1000px действительно работает, width:100% !important ничего не делает.

Спасибо за помощь!

источник

2014-10-26 Florian Müller

вы можете разместить свой код здесь ??? это может помочь вам http://stackoverflow.com/questions/15857092/set-width-of-native-html5-date-and-time-pickers-on-ios-devices –

@ManjunathSiddappa, используя это решение, поле просто выглядит как текстовый ввод с функциональностью датпикера при нажатии на него. На самом деле это должно выглядеть как datepicker, как сейчас, но немного шире ... –

Это способ, которым iOS обрабатывает input type="date". Я бы не стал беспокоиться о родном стиле. Это может выглядеть, но люди, использующие iOS, привыкли к этому.

Вы можете использовать min-width:95% в день ввода. Это делает его пригодным, по крайней мере, в iOS 8 и не меняет внешний вид. Хотя я не тестировал Android или более раннюю версию iOS. В качестве альтернативы, чтобы просто центрировать его, вы можете добавить .center-block на вход, поэтому, по крайней мере, он находится в центре и не выглядит таким.

enter image description here

DEMO: http://jsbin.com/civor/1/

.input-min-width-95p {min-width:95%;}

HTML:

<input type="date" class="form-control input-min-width-95p" ...

источник

2014-10-26 15:21:58 Christina

Если min-width решает проблему, вы также можете попробовать минимальную ширину 100% с помощью поля размера рамки. –

@ ShaneS.Anderson box-sizing: border-box по умолчанию для всех, включая: after,: before в Bootstrap. Итак: нет. – Christina

-2

Twitter самозагрузки подвижен-первых, и будет также работает на всех современных браузер ... You может использовать некоторые отзывчивые утилиты ... like

источник

2014-10-26 16:33:52

Не знаете, как это относится к вопросу вообще – Shayne

В моем случае я установил его с "новым" типа flexbox макета:

input { 
     display:flex; 
     display:-webkit-flex; 
     flex: 1 0 0; 
     -webkit-flex: 1 0 0; 
    }

DEMO: http://output.jsbin.com/bugeqowamu/1

ПРИМЕЧАНИЕ: контейнер должен также иметь display: flex; как в демо.

источник

2015-07-11 22:43:38

Это исправление всех моих полей даты на IOS.

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

источник

2015-07-20 18:54:09

или '-webkit-appearance: none'. – Rockallite

, похоже, не работает на ios 11.0.2 – benbyford

Существует два решения этой проблемы, как показано ниже. Вы можете использовать любой из них.

On ios Method 1 будет увеличивать ширину управления вместе с этим, он изменит свой интерфейс и будет выглядеть как обычный входной блок, то есть он не отобразит выпадающий символ, как показано в методе 1 OUTPUT, а метод 2 просто увеличит ширину элемента управления без удаление выпадающий символа, как показано в способе 2 OUTPUT

Метод 1 ВЫХОД

Способ 2 ВЫХОД

.c1{ 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
} 
 

 
.c2{ 
 
min-width:95%; 
 
}

Method 1) 
 
<input type="time" class="form-control c1" name="txtIn" 
 
\t \t \t \t \t \t \t \t \t \t \t \t id="txtIn" > 
 
<br/><br/> <br/> 
 
Method 2)       
 
<input type="time" class="form-control c2" name="txtOut" 
 
\t \t \t \t \t \t \t \t \t \t \t \t id="txtOut" >

источник

2017-06-09 12:27:09 GSB

iOS safari messes up input type = date

ответ

Смежные вопросы