Beforehand thank you very much!
It happens that I have a input
that has a label
and I edit it CSS
so that label
it is located inside the input
but when they click on it input
, label
it is located at the top edge of the input
. And when they go to the next box, it label
automatically returns to the center of the box input
and overwrites the text that my user enters.
This is an example that I found and until now I am seeing CSS
it and it is not very clear to me, how can I correct this?
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>