Hiệu ứng dịch chuyển khi focus

Bài học 15 trên 19 trong khóa học Bản sao trang đăng nhập Netflix | Dự án front-end của Coddy.

Như bạn thấy bên dưới, nhãn bị dịch chuyển một chút sau khi bạn nhấp vào các trường nhập liệu.

Đây là một đoạn CSS tạo kiểu cho các điều khiển biểu mẫu dựa trên trạng thái của chúng bằng lớp giả :is().

.form-control input:is(:focus,:valid): Bộ chọn này nhắm đến các phần tử <input> có lớp .form-control đang được focus (:focus) hoặc có đầu vào hợp lệ (:valid). Khi thỏa mãn một trong hai điều kiện, màu nền được đặt thành #444 và phần đệm được điều chỉnh thành 16px 20px 0.
.form-control input:is(:focus, :valid)~label: Bộ chọn này nhắm đến các phần tử <label> là phần tử cùng cấp với các phần tử <input> được chọn ở trên và thỏa mãn cùng điều kiện: đang được focus hoặc có đầu vào hợp lệ. Khi thỏa mãn một trong hai điều kiện, cỡ chữ của nhãn được đặt thành 0.75 rem, đồng thời nhãn được dịch lên trên theo chiều dọc một khoảng -130%, có thể để tạo hiệu ứng nhãn nổi phía trên trường nhập liệu.

Thử thách

Dễ

Hãy dùng code gợi ý làm câu trả lời, nhưng trước tiên hãy tự thử nhé.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
        <script src="script.js"></script>
    </body>
</html>