0

I'm trying to center the value of an input field (not the placeholder). Somehow iOS doesn't "recognize" the centering, however firefox, safari and chrome do.

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

}

The result should be a yellow box containing the time 12:00 centered, on an iOS devices it doesn't work.

Here's a jsfiddle: http://jsfiddle.net/y9TPM/4/

Alx
  • 6,275
  • 7
  • 32
  • 54

2 Answers2

2

Input element is mysterious. Some browsers have inline-block value set for display property and some browsers have inline value.

And inline elements cannot have the width and so it cannot align the text to the right or center.

Thus, in your case, the browsers defaulting to the inline-block value for the display property will have alignment effect. But it would not which browsers defaults to the inline value.

Thus, setting display property explicitly will make you relief behind the scene. Just set the display property to inline-block or block to have it's width or alignment.

FYI, most of the browsers should render the display property of input element to inline-block. Here's a quick reference: default css for html elemnts.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
1
display: block;

did the magic, for whatever reasons it is needed for iOS but not for Desktops.. if someone has an explenation I'm happy to hear it

Alx
  • 6,275
  • 7
  • 32
  • 54