首页 > 社区问答列表 >当我使用 CSS 单击输入时，有人可以帮助我向标签添加动画吗？

当我使用 CSS 单击输入时，有人可以帮助我向标签添加动画吗？

P粉891237912 2023-09-15 22:36:22

[HTML讨论组] 举报回复话题 ↕




    
    
    
    Formulário | GN
    
    


   
    
        
             
                Cadastro de Pacientes
                

                    
                        *Nome:
                        
                    
                    


                    
                        Email:
                                                
                    
                    


                   
                    
                        *Telefone:
                        
                    
                    

                    *Sexo:
                        
                        Feminino
                        

                        
                        Masculino
                        



                       
                        
                            *Data de Nascimento:
                            
                        
                        



                        
                            *Cidade:
                            
                        
                        



                        
                            *Estado:
                            
                        
                        



                        
                            Endereço:

我尝试在输入中创建一个名为 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粉891237912

全部回复（1）
我来回复

P粉364129744 采纳为最佳 2023-09-16 12:02:04 1楼

我认为您正在寻找的是将标签放在输入字段的顶部，直到用户处于焦点或有数据在输入字段内。那么您希望标签位于其上方，对吗？

我在下面附上了一个片段。

这是通过以下方式完成的：

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>

赞 +0 添加回复

P粉891237912

进入小组列表 + 发布话题

热门话题

文章推荐

 当我使用 CSS 单击输入时，有人可以帮助我向标签添加动画吗？

这是通过以下方式完成的：

当我使用 CSS 单击输入时，有人可以帮助我向标签添加动画吗？