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>
A solution that I found and that worked for me to make the
label
fixed remain at the top of the text field when some data is entered, so that thelabel
in the entered text is not overwritten, it was only necessary to edit theCSS
in a fragment of the first that I showed, I leave it in case someone needs it.}