0

De ante mano muchas gracias!

Sucede que tengo un input que tienen un label y lo edito mediante CSS para que el label se ubique dentro del input pero cuando le dan click en el input, el label se ubica al borde superior del input. Y cuando pasan a la siguiente casilla ese label regresa automáticamente al centro del input y se sobré escribe en el texto que ingresa mi usuario.

Esto es un ejemplo que encontré y hasta ahora estoy viendo CSS y no me queda muy claro, cómo podré corregir esto?

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans - serif;
}

.input-container {
  width: 280px;
  position: relative;
}

.labelUsuario {
  position: absolute;
  left: 10px;
  top: 14px;
  transition: all .25;
  padding: 0;
  z-index: 1;
  color: #010101;
  font-weight: bold;
}

.text-input {
  padding: .8rem;
  width: 100%;
  height: 100%;
  border: 2px solid #C8C5C5;
  border-radius: 5px;
  outline: none;
  transform: all .3s;
  color: #010101;
  background-color: #F1EFF0;
}

labelUsuario::before {
  content: "";
  height: 5px;
  background-color: #010101;
  position: absolute;
  left: 0;
  top: 10px;
  width: 100%;
  z-index: -1;
}

.text-input:focus {
  border: 2px solid #C8C5C5;
}

.text-input:focus+.labelUsuario,
.filled {
  top: -10px;
  color: #010101;
  background-color: white;
  font-size: 1em;
}

.text-input::placeholder {
  font-size: 1em;
  opacity: 0;
  transition: all .3s;
}

.text-input:focus::placeholder {
  opacity: 1;
}
<form>
  <div class="input-container">
    <input type="text" id="username" class="text-input" autocomplete="off" placeholder="Su Nombre o Razón..." />
    <asp:Label class="labelUsuario" for="username" Text="Ingrese Razón Social o Nombre" runat="server"></asp:Label>
  </div>
  <div class="input-container">
    <input type="text" id="datosContacto" class="text-input" autocomplete="off" placeholder="Datos..." />
    <asp:Label class="labelUsuario" for="datosContacto" Text="Datos de Contacto" runat="server"></asp:Label>
  </div>
</form>

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

4
  • te referis a que el label se mueve del centro? porque copie todo y en ningun momento se mueve. Acordate de importar el archivo normalize.css (esta en la web) que corrige varios errores inesperados. Commented el 20 sept. 2022 a las 22:21
  • Cuando le doy click el label se cambia de posición a la parte superior izquierda del input box y cuando el usuario escribe y pasa al siguiente input box el label regresa a su primera posición y queda sobre el texto que el usuario escribió, te adjunto una imagen para que lo puedas ver! Commented el 22 sept. 2022 a las 14:21
  • lo unico que se me ocurre es que no tengas el normalize.css, me anda perfecto a mi, te paso el html Commented el 23 sept. 2022 a las 3:01
  • Amigo muchas gracias por tu apoyo! ya publique una respuesta y solo fue necesario editar un fragmento del css. Commented el 23 sept. 2022 a las 16:26

2 respuestas 2

0
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="normalize.css"> <!-- importando normalize -->
    <script defer src="scripts.js" type="text/javascript"></script>
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<form>
  <div class="input-container">
    <input type="text" id="username" class="text-input" autocomplete="off" placeholder="Su Nombre o Razón..." />
    <asp:Label class="labelUsuario" for="username" Text="Ingrese Razón Social o Nombre" runat="server"></asp:Label>
  </div>
  <div class="input-container">
    <input type="text" id="datosContacto" class="text-input" autocomplete="off" placeholder="Datos..." />
    <asp:Label class="labelUsuario" for="datosContacto" Text="Datos de Contacto" runat="server"></asp:Label>
  </div>
</form>
</body>
</html>
0

Una solucion que encontre y que me funcionó para hacer que quedara el label fijo en la parte superior del campo de texto cuando se ingresa algún dato, para que no se sobre escriba el label en el texto ingresado, solamente fue necesario editar el CSS en un fragmento del primero que mostré, lo dejo por si alguien lo necesita.

.text-input:focus + .labelUsuario, .filled, .text-input:not(:placeholder-shown) + .labelUsuario {
top: -10px;
color: #010101;
background-color: white;
font-size: 1em;

}

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.