Move the shortcut of the input box when the user focuses on it without requiring
I want to move the label above the input field when the user focuses on the input field. There is an answer here , however there are some differences. I cannot use it as I am using custom validations. In addition, there is more than one input field.
See my code below. I am missing something stupid.
.field {
position: relative;
padding-top: 10px;
}
.form label {
position: absolute;
top: 8px;
left: 10px;
pointer-events: none;
}
input:focus ~ label {
top: -6px;
}
<form class="form">
<div class="field">
<label>Name</label>
<input type="text">
</div>
<div class="field">
<label>Age</label>
<input type="text">
</div>
</form>
+3
user7597670
source
to share
1 answer
To create this with just css you need to reorder input
and label
so you can use a selector +
. Then you can use transform: translate()
on label
when you focusinput
form {
display: inline-block;
}
.field {
padding-top: 10px;
display: flex;
flex-direction: column;
}
label {
order: -1;
padding-left: 5px;
transition: all 0.3s ease-in;
transform: translateY(20px);
pointer-events: none;
}
input:focus + label {
transform: translateY(-2px);
}
<form class="form">
<div class="field">
<input type="text">
<label>Name</label>
</div>
<div class="field">
<input type="text">
<label>Age</label>
</div>
</form>
+1
source to share