Effect on input type="date"

Navigation
1

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>
    
asked by anonymous 02.09.2018 / 02:54

1 answer

0

You can determine that when it is invalid, it assigns a transparent color to dd/mm/aaaa and when it is selected, assigns a black color to dd/mm/aaaa : 

.effect:required:invalid::-webkit-datetime-edit{
	color: transparent;
}
.effect:focus::-webkit-datetime-edit{
	color: black !important;
}
<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
</head>
<body>
	<input type="date" name="data" required="required" class="effect">
</body>
</html>
    
02.09.2018 / 04:58
Register and display image in database with PHP [duplicate] No Persistence provider for EntityManager named