.menor {
text-align: center;
}
<input class="menor" type="time" id="abre" name="abre" required><br><br>
No computador, funciona normalmente. Mas no celular, o texto não fica alinhado dentro da caixa. Como resolver isso?
.menor {
text-align: center;
}
<input class="menor" type="time" id="abre" name="abre" required><br><br>
No computador, funciona normalmente. Mas no celular, o texto não fica alinhado dentro da caixa. Como resolver isso?
Você pode configurá-lo no centro usando o padding-left do CSS.
Para ter efeito em todos os dispositivos configure uma largura e aplique um padding-left.
Para uma largura de 100px coloquei um padding-left de 22 px.
CSS
.menor{
padding-left:22px;
width: 100px;
}
HTML
<input class="menor" type="time" id="abre" name="abre" required>
Para uma largura de 200px com tamanho das letras 36 px coloquei um padding-left de 50 px.
.menor{
padding-left:45px;
width: 200px;
font-size: 36px;
}
Os exemplos foram testados no Chrome, Firefox, Edge, Opera, Safari e Galaxy A5
IE input time não funciona