Text input field, step 2

A technique with :checked ~ was used many times in previous tasks. For this task, we will use a similar approach for the :focus and :valid selectors.

In order to make sure that our self-made placeholder does not interfere when we are entering text and does not cover filled fields, we will move it higher and slightly decrease its size. To do this, we use a CSS rule with the following selectors:

input:focus ~ .label-box label,
input:valid ~ .label-box label {
  ...
}

The first selector is activated when the cursor is in the field, and the second selector is activated when the field is filled correctly. This is a simplified example, so we are not considering all of the options, such as, for example, when the entered field data is not valid.

To make the label move nicely, let’s add a smooth transition to it.