1

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?

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

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

1 Resposta 1

1

Você pode determinar que quando ele for inválido, atribui uma cor transparente no dd/mm/aaaa e quando ele for selecionado, atribui uma cor preta ao 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>

1
  • Funcionou perfeitamente, estava quebrando a cabeça pra resolver isso! Muito obrigado! 2/09/2018 às 17:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .