How to center text within input type="time"?

Question

Navigation

#1 by (0 votes)

1

<input class="menor" type="time" id="abre" name="abre" required><br><br>

I have this input with the following CSS:

.menor {
   text-align: center;
}

On the computer, it works normally. But on the cell phone, the text does not line up inside the box. How do I resolve this?

html5 css3

asked by anonymous 20.05.2018 / 20:08

1 answer

score 0 · Answer 1

You can configure it in the center using the CSS padding-left.

To take effect on all devices set up a width and apply a padding-left.

For a width of 100px I put a padding-left of 22px.

CSS

.menor{
    padding-left:22px;
    width: 100px;
 }

HTML

<input class="menor" type="time" id="abre" name="abre" required>

For a width of 200px with letter size 36px I put a 50px padding-left.

.menor{
   padding-left:45px;
   width: 200px;
   font-size: 36px;
 }

The examples have been tested on Chrome, Firefox, Edge, Opera, Safari and Galaxy A5

IE input time does not work