How to implement a popup title in pure CSS?

Question

css

The title should rise above the text when the cursor is in the field or when the field contains text:

I managed to implement this in CSS, but with one trick: in HTML, you have to set the required flag for all inputs.

If this is not done and the dependency :not(:valid) is set, then in all cases when the content of the input passes the type check, the title will be omitted.

Is there a more elegant way or just JS?

My SCSS:

.style-textbox {
    position: relative;
    width: 100%;
    input {
        appearance: none;
        outline: none;
        height: 50px;
        width: 100%;
        font-size: 18px;
        box-sizing: border-box;
        padding-top: 15px;
        padding-left: 10px;
        border: colors.$gray-m solid 1px;
        border-radius: 2px;
        &:focus,
        &:active {
            border-color: colors.$gray-xl;
            outline: none;
        }
        &:focus ~ label,
        &:valid ~ label {
            font-size: 12px;
            top: 6px;
            color: colors.$gray-m;
            transition: 0.5s;
        }
    }
    label {
        position: absolute;
        @include fonts.font(ar);
        font-size: 18px;
        color: colors.$gray-l;
        top: 14px;
        left: 0px;
        padding-left: 10px;
        pointer-events: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }

Answer 1