<!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)
Je pense que ce que vous cherchez, c'est de mettre
标签
放在输入
字段的顶部,直到用户处于焦点或有数据 在输入
à l'intérieur du terrain. Vous voulez donc que l’étiquette soit au-dessus, n’est-ce pas ?J’ai joint un clip ci-dessous.
Cela se fait par :