フォーカス時のシフトエフェクト

Coddyの「Netflixサインインページのクローン | フロントエンドプロジェクト」コースのレッスン 15/19。

以下に示すように、入力フィールドをクリックするとラベルのテキストが少しずれます。

このコードは、:is() 疑似クラスを使用して、状態に基づいてフォームコントロールのスタイルを設定するCSSスニペットです。

.form-control input:is(:focus,:valid): このセレクターは、フォーカスされている（:focus）か、有効な入力がある（:valid）かのいずれかの状態にある、クラス .form-control を持つ <input> 要素をターゲットにします。これらの条件のいずれかが満たされると、背景色が #444 に設定され、パディングが 16px 20px 0 に調整されます。
.form-control input:is(:focus, :valid)~label: このセレクターは、先ほどと同じ条件（フォーカスされているか、有効な入力があるか）を満たす <input> 要素の兄弟要素である <label> 要素をターゲットにします。いずれかの条件が満たされると、ラベルのフォントサイズが 0.75 rem に設定され、垂直方向に -130% 上方に移動（translate）します。これは、おそらく入力フィールドの上にフローティングラベル効果を作成するためです。

チャレンジ

簡単

ヒントのコードを解答として使用してください。ただし、まずは自分自身で試してみてください。

自分で試してみよう

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