<!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>
I tried creating a class called inputUser in the input, then I tried creating animation in the label style, but it didn't work, I don't know why. The animation includes when the user clicks on the camp text, the labels (Nome, Email, Telefone, Cidade, Estado and Endereco) rise (top: -20px), the font size decreases to 12 px, and the color changes to greenish-yellow. [[Enter image description here](https://i.stack.imgur.com/8gg3w.png)](https://i.stack.imgur.com/Z05NC.png)
P粉3641297442023-09-16 12:02:04
I think what you are looking for is to place the tag on top of the input field until the user is in focus or has data in the input within the field. So you want the label to be above it, right?
I've attached a snippet below.
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>