Чтобы создать плавающие метки ввода в CSS, вы можете использовать несколько методов. Ниже я объясню некоторые из них:

1. Использование псевдокласса :placeholder-shown:

   .form-group {
    position: relative;
   }
   .form-group label {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: all 0.2s ease;
   }
   .form-group input:focus + label,
   .form-group input:not(:placeholder-shown) + label {
    transform: translateY(-100%);
    font-size: 12px;
   }

2. Использование псевдоклассов :valid и :invalid:

   .form-group {
    position: relative;
   }
   .form-group label {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    transform-origin: left top;
   }
   .form-group input:focus + label,
   .form-group input:valid + label {
    transform: translateY(-100%);
    font-size: 12px;
   }

3. Использование JavaScript для манипулирования метками:

   <div class="form-group">
    <input id="input-field" type="text" />
    <label for="input-field">Label</label>
   </div>

   .form-group {
    position: relative;
   }
   .form-group label {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    transform: translateY(0%);
   }
   .form-group input:focus + label,
   .form-group input:not(:placeholder-shown) + label {
    transform: translateY(-100%);
    font-size: 12px;
   }