Tengo el siguiente codigo.
.form-group{
position: relative;
margin-bottom: 2.5rem;
padding-top:1rem;
}
.form-group label{
position: absolute;
top: 0;
left: 0;
transform: translate(16px, 16px);
transform-origin: left;
transition: transform .25s;
color: #bfbfbf;
width: 90%;
}
.form-group:focus-within label{
transform: translate(0, -6px) scale(.8);
color: #707070;
white-space: nowrap;
}
<div class="form-group">
<input class="form-control" type="text" id="url" aria-describedby="namelHelp" required>
<label for="url">Full Name</label>
<small id="namelHelp" class="form-text text-muted"></small>
</div>
El efecto esta super genial pero necesito validar con css el hecho de que el input ya no esté vacío para poder establecer unos estilos finales de dicho label cuando el usuario ya haya introducido los datos en el input.