<!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>
Ich habe versucht, eine Klasse namens „inputUser“ in der Eingabe zu erstellen und dann habe ich versucht, eine Animation im Label-Stil zu erstellen, aber es hat nicht funktioniert und ich weiß nicht warum. Die Animation umfasst, wenn der Benutzer auf den Camp-Text klickt, die Beschriftungen (Nome, Email, Telefone, Cidade, Estado und Endereco) ansteigen (oben: -20 Pixel), die Schriftgröße auf 12 Pixel verkleinert wird und die Farbe in grünlich wechselt. Gelb. [[Bildbeschreibung hier eingeben](https://i.stack.imgur.com/8gg3w.png)](https://i.stack.imgur.com/Z05NC.png)
我认为您正在寻找的是将
标签
放在输入
字段的顶部,直到用户处于焦点或有数据 在输入
字段内。那么您希望标签位于其上方,对吗?我在下面附上了一个片段。
这是通过以下方式完成的: