Boa noite, galera!
Estou com uma pequena dificuldade em fazer um efeito no input type="date"
. Consigo fazer normalmente no input type="text"
(primeira print mostra sem o efeito e o segundo mostra com o efeito), mas no date
ele fica aparecendo o "dd/mm/aaaa"
abaixo do texto (como mostra o terceiro print e o quarto com o efeito). Existe alguma forma de fazer isso sumir e quando clicasse no input ele aparecesse?
Código
Style:
.effect{
position: relative;
background-color: transparent;
}
.effect ~ .focus-border{
position: absolute;
margin-left: 44px;
bottom: 0; left: 50%;
width: 0;
height: 2px;
background-color: #4CAF50;
transition: 0.4s;
z-index: 2;}
.effect:focus ~ .focus-border,
.has-content.effect ~ .focus-border{
width: 80%; transition: 0.4s; left: 0;
}
.effect ~ h3{
position: absolute; margin-left: 44px; width: 100%; top: 8px; color: #aaa; transition: 0.3s; letter-spacing: 0.5px; cursor: default;
}
.effect:focus ~ h3, .has-content.effect ~ h3{
top: -16px; font-size: 12px; color: #4CAF50; transition: 0.3s;
}
Html:
<div class="col-3 input-effect-data">
<i class="fas fa-calendar-alt" id="fa" aria-hidden="true"></i>
<input type="date" class="effect" required>
<h3>Insira sua data de nascimento</h3>
<span class="focus-border"></span>
</div>