<!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>
我嘗試在輸入中建立一個名為 inputUser 的類,然後我嘗試在標籤樣式中建立動畫,但不起作用,我不知道為什麼。 動畫包括當使用者點擊營地文字時,標籤(Nome、Email、Telefone、Cidade、Estado 和 Endereco)上升(頂部:-20px),字體大小會減少到 12 px,顏色變為綠黃色。 [[在此輸入影像描述](https://i.stack.imgur.com/8gg3w.png)](https://i.stack.imgur.com/Z05NC.png)
P粉3641297442023-09-16 12:02:04
我認為您正在尋找的是將標籤
放在輸入
字段的頂部,直到用戶處於焦點或有資料 在輸入
字段內。那麼您希望標籤位於其上方,對嗎?
我在下面附上了一個片段。
input:not(:invalid) + label, input:focus + label { top: 0; opacity: 75%; font-size: 0.9rem; background: white; transition: all .2s ease-in-out; }
*{
font-family: arial;
padding: 0;
margin: 0;
}
form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.input-field {
position:relative;
width:204px;
}
input {
position: relative;
width: 200px;
margin: 20px;
padding: 10px 8px;
outline: none;
border: none;
border-bottom: 2px solid black;
font-size:1rem;
}
input:focus {
border-bottom: 3px solid black;
}
label {
position: absolute;
top: 30%;
left: 10%;
padding: 5px 10px;
font-size: 1rem;
pointer-events: none;
transition: all 0.2s ease-in-out 0s;
}
input:not(:invalid) + label,
input:focus + label {
top: 0;
opacity: 75%;
font-size: 0.9rem;
background: white;
transition: all .2s ease-in-out;
}
<form>
<div class="input-field">
<input type="text" name="forename" required>
<label>First Name</label>
</div>
<div class="input-field">
<input type="text" name="surname" required>
<label>Last Name</label>
</div>
</form>