0

.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?

5
  • 2
    Sem querer te desanimar, mas existem estilos que são default do sistema e não do browser. Talvez no dispositivo mobile ele não aceite esse tipo de estilo, principalmente um input com tipo date, time, tel, etc...
    – hugocsl
    Commented 20/05/2018 às 18:40
  • @hugocsl fiz um teste no Galaxy A5 com width e padding-left e funcionou.
    – user60252
    Commented 20/05/2018 às 23:28
  • 1
    @LeoCaracciolo bom de mais então, e com o text-align no centro deu certo? Para essa situação tente usar a medida em REM ou EM pq px pode dar problema se o cara aumentar a fonte pra 20px por exemplo ai vc perde a referencia do tamanho padrão
    – hugocsl
    Commented 20/05/2018 às 23:47
  • @hugocsl text-align não. Mas há que ter bom senso não se pode colocar conteúdo maior que o espaço designado.
    – user60252
    Commented 20/05/2018 às 23:53
  • O bom é trabalhar com %, nesse caso. Obrigado, galera.
    – WillBill
    Commented 21/05/2018 às 3:54

1 Resposta 1

-1

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

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .