Quelqu'un peut-il m'aider à ajouter une animation à l'étiquette lorsque je clique sur l'entrée en utilisant CSS ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário | GN</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body{font-family: Arial, Helvetica, sans-serif;
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(17, 54, 71));
}
.box{
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6);
padding: 15px;
border-radius: 15px;
width: 23%;
}
fieldset{
border: 3px solid greenyellow;
}
legend{
border: 1px solid greenyellow;
padding: 10px;
text-align: center;
background-color: greenyellow;
border-radius: 8px;
color: black;
}
.inputBox{
position: relative;
}
.inputUser{
background: none;
border: none;
border-bottom: 1px solid white;
outline: none;
color: white;
font-size: 14px;
width: 100%;
letter-spacing: 2px;
}
#submit{
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(19, 169, 195));
width: 40%;
border: none;
padding: 10px;
color: black;
font-size: 17px;
cursor: pointer;
border-radius: 10px;
text-align: center;
}
#submit1{
position: relative;
left: 60px;
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(19, 169, 195));
width: 40%;
border: none;
padding: 10px;
color: black;
font-size: 17px;
cursor: pointer;
border-radius: 10px;
text-align: center;
font-style: inherit;
}
#submit:hover{
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(7, 105, 40));
}
#submit1:hover{
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(7, 105, 40));
}
.labelInput{
position: absolute;
border: none;
pointer-events: none;
transition: .5s;
}
.inputUser:focus ~.labelInput,
.inputUser:valid ~ .labelInput{
top: -20px;
font-size: .85px;
color: greenyellow;
}
</style>
</head>
<body>
<div class="box">
<from action = "">
<fieldset>
<legend><b>Cadastro de Pacientes</b></legend>
<br>
<div class="inputbox">
<label for = "nome" class="labelInput">*<b>Nome:</b></label>
<input type="text" name="nome" id="nome" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="email" class="labelInput"><b>Email:</b></label>
<input type="text" name="email" id="email" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="telefone" class="labelInput">*<b>Telefone:</b></label>
<input type="text" name="telefone" id="telefone" class="inputUser" required>
</div>
<p>*<b>Sexo:</b></p>
<input type="radio" id="feminino" name="genero" value="feminino" required>
<label for="feminino">Feminino</label>
<br>
<input type="radio" id="masculino" name="genero" value="masculino" required>
<label for="masculino">Masculino</label>
<br><br><br>
<div class="inputbox">
<label for ="data_nascimento">*<b>Data de Nascimento:</b></label>
<input type="date" name="data_nascimento" id="data_nascimento" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="cidade" class="labelInput">*<b>Cidade:</b></label>
<input type="text" name="cidade" id="cidade" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="estado" class="labelInput">*<b>Estado:</b></label>
<input type="text" name="estado" id="estado" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="endereco" class="labelInput"><b>Endereço:</b></label>
<input type="text" name="endereco" id="endereco" class="inputUser" required>
</div>
<br><br>
<a href="file:///home/liniquer/Formul%C3%A1rio%20/pag1.html">
<button type="button" name="submit" id="submit" value= "< Voltar">< Voltar</button>
</a>
<a href="file:///home/liniquer/Formul%C3%A1rio%20/pag2.html">
<button type="button" name="submit" id="submit1" value="Avançar >">Avançar ></button>
</a>
</fieldset>
</body>
</html>
J'ai essayé de créer une classe appelée inputUser dans l'entrée, puis j'ai essayé de créer une animation dans le style d'étiquette mais cela n'a pas fonctionné et je ne sais pas pourquoi. L'animation inclut lorsque l'utilisateur clique sur le texte du camp, les étiquettes (Nome, Email, Telefone, Cidade, Estado et Endereco) montent (en haut : -20 px), la taille de la police diminue à 12 px et la couleur passe au verdâtre. jaune. [[Entrez la description de l'image ici](https://i.stack.imgur.com/8gg3w.png)](https://i.stack.imgur.com/Z05NC.png)
