0

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.

1
  • 1
    No puedes hacerlo con css, tienes que validar con javascript y de nuevo con javascript aplicas un nuevo estilo. Commented el 29 jun. 2022 a las 1:51

1 respuesta 1

1

Quizás esto te sirva, usando la pseudoclase :valid e invocando a su elemento hermano label mediante el selector CSS +. Agrégalo a tu css y pruébalo (no estoy seguro que sea compatible en todos los navegadores):

.form-group > input:valid + label{
    transform: translate(0, -6px) scale(.8);
    color: #707070;
    white-space: nowrap;
}

Ejemplo:

.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;
}

.form-group>input:valid+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>

1
  • Excelente hermano, funciono perfecto. Añado otra alternativa que pude encontrar pero no sirve para el caso de un text area. Seria con javascript <input type="email" value="" placeholder="valid mail" onchange="this.setAttribute('value', this.value);" /> Commented el 29 jun. 2022 a las 15:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.