3

Como eu consigo alterar o height e width da tag input do tipo date e time, no próprio HTML ou no CSS ?

1
  • fares se você tiver uma nova pergunta, faça-a, não mude a pergunta atual, pois já existe resposta para a mesma. Estou revertendo sua edição.
    – NoobSaibot
    Commented 20/05/2018 às 16:21

3 Respostas 3

3

Vc pode selecionar o tipo do input que quer usando o attr do CSS direto para o tipo date e tipo time dessa forma.

Nesse exemplo além do width eu tb coloquei uma bordar para vc ver como só pega o estilo nos inputs com o tipo definido no attr

input[type="date"], 
input[type="time"] {
    width: 200px;
    height: 30px;
    border: 2px solid green;
}
<input type="date">
<input type="time">
<input type="text" placeholder="tipo text">
<input type="email" placeholder="tipo email">

5
  • 1
    Obrigado... deu certo. Queria saber agora como tiro a legenda, que não apareça "dd/mm/aaaa" e "-- : --".
    – fares
    Commented 20/05/2018 às 14:55
  • @fares repare que isso vai mudar a classe de todos os inputs do tipo data e tempo, então vc pode encapsulalos dentro do seu form colocando uma classe pai tipo form.contato input[type="date"] { } isso vai fazer com que só os inputs desse tipo dentro do form com a classe contato peguem o css não todos os input date do seu site inteiro se for o caso de terem outros entende
    – hugocsl
    Commented 20/05/2018 às 15:00
  • Entendi... mas como consigo fazer?
    – fares
    Commented 20/05/2018 às 15:09
  • Coloquei assim... mas não deu... input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
    – fares
    Commented 20/05/2018 às 15:15
  • @fares o que acontece é que por algum motivo o browser só vai aceitar a classe se vc coloca-las separadas por tipos. Dessa forma "input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator { }" e o outro assim "input[type="time"]::-webkit-inner-spin-button { }" se vc colocar os dois tipos juntos só separado pela virgula o browser não reconhece não sei pq...
    – hugocsl
    Commented 20/05/2018 às 16:13
3

Voce pode adicionar a tag style diretamente na sua tag html como por exemplo :

<input type="date" name="date" id="date" style="width:500px;height:500px;">

Porém não e recomendado e se eu não me engano não e uma boa prática.

1

Usando CSS:

<style type="text/css">
    #date{width:500px;height:500px}
</style>
<input type="date" name="date" id="date">

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 .