Не срабатывает анимация при заполнении текста в input?

Question

[GIRU]

Всем доброго вечера или ночи! Имею такой HTML

<div class="input__block">
                        <input type="text" name="name" id="name" class="form__input input">
                        <label for="name" class="input__label label">Имя</label>
                    </div>

И такой CSS

.input {
    background: transparent;
    outline: none;
    border-bottom: 1px solid white;
    margin-bottom: 30px;
    color: white;

    &:hover {
        border-bottom: 1px solid #ccc;
    }

    &:nth-child(1n) {
        width: 100%;
        transition: 0.5s;
    }

    &__block {
        position: relative;
        &_inline {
            max-width: 220px;
            width: 100%;

            @include table {
                max-width: 100%;
            }
        }

        &_box {
            display: flex;
            justify-content: space-between;

            @include table {
                flex-direction: column;
            }
        }
    }

    &__label {
        position: absolute;
        color: rgba(255, 255, 255, 0.46);
        font-size: 18px;
        left: 10px;
        top: -10px;
    }
}

.textarea {
    position: relative;
    color: white;
    background: transparent;
    outline: none;
    border: 1px solid #FFFFFF;
    border-radius: 13px;
    margin-top: 20px;
    width: 100%;
    padding-top: 30px;
    padding-left: 30px;

    &__small {
        position: absolute;
        color: rgba(255, 255, 255, 0.46);
        font-size: 18px;
        left: 30px;
        top: 25px;
    }

    &__label {

    }

    &:focus ~ .textarea__small {
        left: 0;
        top: -10px;
    }

    &:not(:placeholder-shown) ~ .label {

    }
}

//input:focus ~ label, input:valid ~ label{
//    top: -25px;
//    left: 0;
//}

input:focus ~ label, input:not(:placeholder-shown) ~ label {
    top: -25px;
    left: 0;
}

//.input:focus ~ .label,  /* фокус на input */
//.input:not(:placeholder-shown) ~ .label  /* в input есть значение */  {
//    transform: translateY(-30px) translateX(10px) scale(0.75);
//}

Хочу добиться чтобы текст(label) поднимался при введении текста и не опускался если в инпут введен текст. Делал все по инструкции https://xhtml.ru/2021/html/how-to-create-fancy-jum..., но у меня просто не срабатывает. Если я просто указываю

input:focus ~ label{
    top: -25px;
    left: 0;
}

то текст поднимается при фокусе, но после опускается, даже если введен текст. Подскажите пожалуйста в чем моя ошибка? Rig-line.ru вот здесь можно потыкать в живую

Answer 1

[Ankhena]

Плейсхолдер забыли
Чтобы срабатывал :placeholder-shown (и в сочетании с :not) он должен быть.

https://codepen.io/AnnaSummer/pen/xxYygyK

Comments

[GIRU]

.input:focus ~ .label, .input:not(:placeholder-shown) ~ .label {
top: -25px;
left: 0;
}
делаю вот так, плейсхолдер вроде указал, или что то не так?

[Ankhena]

GIRU,

<input type="text" name="name" id="name" class="form__input input">

где он?

Answer 2

[Виталий Першин]

Должен быть placeholder и он не должен быть пустым: