How to change another element with pure CSS?

Question

How to change another element with pure CSS?

Navigation

#1 by (10 votes)

2

How can I change another element with pure CSS, from an element?

I tried to do this but it did not roll. I do not really know the selectors and wonders of CSS.

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 focus on input, upload the label with pure CSS.

css css-seletores

asked by anonymous 11.10.2017 / 17:21

1 answer

How to use a property of a tag using JQuery Why do not you have to instantiate the list to not accumulate?

score 10 · Accepted Answer

You can do 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 got your input and label I added inside a div and changed the position, the selector "+" means that the immediately preceded element will be picked up, in case "input: focus + label", when the input is focused it will pick up the next element label, I changed some of your css placements and added the "transition: .2s linear;", it will be responsible for the smooth animation of the text going up. The "~" selector would also work, but in case, every label down would also apply the effect.