2
How can I change another element with Pure CSS, from one element?
I tried to do this but it didn’t roll. I don’t know the CSS selectors and wonders in depth.
input {
display: block;
transition: top .3s, left .3s;
}
label {
position: relative;
top: 17px;
font-size: 12px;
left: 5px;
}
input:focus ~ label {
top: 0px;
left: 0px;
}<label>Label</label>
<input type="text">What I want to do is to focus on input, move the label up with pure CSS.
10
You can do it like this:
div {
position: relative;
}
input {
display: block;
transition: top .3s, left .3s;
position: relative;
top: 17px;
font-size: 12px;
}
label {
transition: .2s linear;
position: absolute;
top: 20px;
font-size: 12px;
left: 5px;
}
input:focus + label {
top: 0px;
left: 0px;
}<div>
<input type="text">
<label>Label</label>
</div>Basically I took your input and label I added inside a div and changed position, the "+" selector means that you will get the element immediately preceded, in the case "input:Focus + label", when the input is focused it will take the next label element, I switched some positions of your css and added "Transition: . 2s linear;" he will be responsible for the smooth animation of the rising text. The "~" selector would also work, but in the case, all labels down would also apply the effect.
Perfect guy, that’s exactly what I wanted! Thank you and welcome!
Thank you for!
@Victorpereira liked the example too much, if explain has my +1
Explained, I hope to have helped!
Browser other questions tagged css css-selectors
You are not signed in. Login or sign up in order to post.
The label is to stay inside the same input?
– Jéf Bueno
I want to do the same thing as Materialize, when you click on the input the label goes back to its initial position. So I need to in the input Focus, change the position of the label and do not know if it is possible to do this with pure CSS, this is my hope. Abs
– Guilherme IA
Beauty. I think it would be important to have that description in the question.
– Jéf Bueno