Good evening, guys!
I'm having a little difficulty making an effect on input type="date"
. I can normally do in input type="text"
(first print shows no effect and second shows with effect), but in date
it gets "dd/mm/aaaa"
below text (as shown in third print and fourth with effect ). Is there any way to make it disappear and when I click the input it appears?
Code
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:
<divclass="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>