<!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)
我认为您正在寻找的是将
标签
放在输入
字段的顶部,直到用户处于焦点或有数据 在输入
字段内。那么您希望标签位于其上方,对吗?我在下面附上了一个片段。
这是通过以下方式完成的: