Центрирование поля ввода HTML для iOS

Question

Центрирование поля ввода HTML для iOS

0

Я пытаюсь центрировать значение поля ввода (а не заполнителя). Как-то iOS не "распознает" центрирование, однако Firefox, сафари и хром делают.

HTML

<input type="time" value="12:00">

CSS

input {
  background-color: lightyellow;
  border: none;
  outline: none;
  text-align: center;
  width: 200px;
  padding: 5%;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  -webkit-background-clip: border-box;
  -webkit-background-origin: padding-box;
  -webkit-background-size: auto;
  -webkit-box-shadow: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

Результатом должен быть желтый ящик, содержащий время с 12:00 по центру, на устройствах iOS это не работает.

Здесь jsfiddle: http://jsfiddle.net/y9TPM/4/

Alx 04 май 2014, в 16:14

Источник

Теги:

html

css

ios

input

time

2 ответа

Ещё вопросы

Bhojendra Rauniyar · Answer 1 · 2017-12-18T14-28-00.000Z

Элемент ввода таинственный. Некоторые браузеры имеют значение inline-block установленное для свойства отображения, а некоторые браузеры имеют inline значение.

И встроенные элементы не могут иметь ширину и поэтому не могут выровнять текст вправо или в центре.

Таким образом, в вашем случае браузеры, по умолчанию для значения inline-block для свойства отображения, будут иметь эффект выравнивания. Но это не означает, что браузеры по умолчанию используют inline значение.

Таким образом, установка свойства отображения явно облегчит вам ситуацию. Просто установите для свойства отображения inline-block или block чтобы иметь ширину или выравнивание.

FYI, большинство браузеров должны отображать свойство отображения входного элемента в inline-block. Вот краткая ссылка: default css для html elemnts.

Alx · Answer 2 · 2014-05-04T11-03-00.000Z

display: block;

сделал волшебство, по каким-то причинам он необходим для iOS, но не для настольных компьютеров. Если у кого-то есть объяснение, я рад его слышать