0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>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.</p>
1
<p>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.</p>
2
<p>></p>
2
<p>></p>
3
<p>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:</p>
3
<p>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:</p>
4
input:focus ~ .label-box label, input:valid ~ .label-box label { ... }<p>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.</p>
4
input:focus ~ .label-box label, input:valid ~ .label-box label { ... }<p>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.</p>
5
<p>To make the label move nicely, let’s add a smooth transition to it.</p>
5
<p>To make the label move nicely, let’s add a smooth transition to it.</p>