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

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




    
    
    
    Formulário | GN
    
    


   
    
Cadastro de Pacientes




*Sexo:













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

  • P粉364129744
  • 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 添加回复