Quelqu'un peut-il m'aider à ajouter une animation à l'étiquette lorsque je clique sur l'entrée en utilisant CSS ?
P粉891237912
P粉891237912 2023-09-15 22:36:22
0
1
1389

<!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)

P粉891237912
P粉891237912

répondre à tous(1)
P粉364129744

Je pense que ce que vous cherchez, c'est de mettre 标签放在输入字段的顶部,直到用户处于焦点或有数据输入 à l'intérieur du terrain. Vous voulez donc que l’étiquette soit au-dessus, n’est-ce pas ?

J’ai joint un clip ci-dessous.

Cela se fait par :

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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!