Como eu consigo alterar o height
e width
da tag input
do tipo date e time, no próprio HTML ou no CSS ?
-
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.– NoobSaibotCommented 20/05/2018 às 16:21
Adicione um comentário
|
3 Respostas
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">
-
1Obrigado... deu certo. Queria saber agora como tiro a legenda, que não apareça "dd/mm/aaaa" e "-- : --".– faresCommented 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– hugocslCommented 20/05/2018 às 15:00 -
-
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; }– faresCommented 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...– hugocslCommented 20/05/2018 às 16:13
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.
Usando CSS
:
<style type="text/css">
#date{width:500px;height:500px}
</style>
<input type="date" name="date" id="date">