Shift effect on focus

Lesson 15 of 19 in Coddy's Netflix Sign-in Page Clone | Front-end project course.

As we can see below, there is a bit of shift in the label text after clicking on the input fields.

This code is a CSS snippet that styles form controls based on their state using the :is() pseudo-class.

.form-control input:is(:focus,:valid): This selector targets <input> elements with the class .form-control that are either in focus (:focus) or have valid input (:valid). When either of these conditions is met, the background color is set to #444, and the padding is adjusted to 16px 20px 0.
.form-control input:is(:focus, :valid)~label: This selector targets <label> elements that are siblings of the previously selected <input> elements with the same conditions: either in focus or having valid input. When either condition is met, the font size of the label is set to 0.75 rem, and it is translated vertically upwards by -130%, likely to create a floating label effect above the input field.

Challenge

Easy

Use the hint code as an answer, but first try it yourself.

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>