Community
Learn
Tools Library
AI Tools
Leisure
search
English
Can anyone help me add animation to the label when I click the input using CSS?
P粉891237912
P粉891237912 2023-09-15 22:36:22
0
1
1491

<!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粉891237912
P粉891237912

reply all(1)
P粉364129744
P粉3641297442023-09-16 12:02:04 1 floor

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.

This is done by: 

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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template