input:valid заставляет выполняться стили без какого либо контакта к форме

Стили из .user-box input:valid ~ label сразу воспроизводятся без какого-либо участия по отношению к форме, т.е. без ввода текста label уже поднялся вверх. (по задумке при вводе текста, он должен подняться над полем ввода.

.user-box input:focus ~ label, .user-box input:valid ~ label {
    padding: 0 0;
    font-size: 12px;
}

Погуглив 20 мин так и не нашел адекватного ответа из-за чего это происходит, архитектура "шедевра" выглядит так:

<div class="user-box">
                <input type="text" name="" id="">
                <label for="">Username</label>
            </div>
            <div class="user-box">
                <input type="password" name="" id="">
                <label for="">Password</label>
            </div>