Bolehkah sesiapa membantu saya menambah animasi pada label apabila saya mengklik input menggunakan CSS?

Question

rreeee

Saya cuba mencipta kelas yang dipanggil inputUser dalam input dan kemudian saya cuba mencipta animasi dalam gaya label tetapi ia tidak berfungsi dan saya tidak tahu mengapa. Animasi termasuk apabila pengguna mengklik pada teks kem, label (Nome, E-mel, Telefone, Cidade, Estado dan Endereco) meningkat (atas: -20px), saiz fon berkurangan kepada 12 px dan warna berubah kepada kehijauan- kuning. [[Masukkan penerangan imej di sini](https://i.stack.imgur.com/8gg3w.png)](https://i.stack.imgur.com/Z05NC.png)

Answer 1

Saya rasa apa yang anda cari ialah meletakkan 标签放在输入字段的顶部，直到用户处于焦点或有数据 在输入 di dalam padang. Jadi anda mahu label berada di atasnya, bukan?

Saya telah melampirkan klip di bawah.

Ini dilakukan oleh:

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>