Effect on input type="date"

Asked

Viewed 374 times

1

Good night, you guys!

I’m having a little trouble getting an effect on input type="date". I can do it normally in the input type="text" (first print shows without the effect and the second shows with the effect), but in date he keeps appearing the "dd/mm/aaaa" below the text (as shown in the third print and the fourth with the effect). Is there any way to make it go away?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

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:

<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>
javascript html css

  • put the code of how it is doing, which helps the visualization of the problem

  • I put the code, but I could not format right, I’m new here. I hope you can understand

  • This should help you https://answall.com/questions/298114/como-trocar-a-mascara-de-um-input-tipo-data/298132#298132

  • Solved! Thank you very much!

1 answer

1


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 the 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>

  • It worked perfectly, I was cracking my head to fix it! Thank you very much!

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.