LabEx
ログイン登録

CSS の:focus-within を使ったフォームのインタラクティビティ向上

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、CSS の :focus-within 疑似クラスを調べます。これにより、子要素のいずれかがフォーカスされたときに親要素にスタイルを適用できます。この機能を使って、ユーザーが操作すると外観が変化する視覚的に魅力的なフォームを作成します。この実験を通じて、CSS を使ってインタラクティブなフォームを作成することで、ユーザー エクスペリエンスをどのように向上させるかをより深く理解することができます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

子要素がフォーカスされたとき

VM には既に index.html と style.css が用意されています。

フォームの子要素のいずれかがフォーカスされたときにその外観を変更するには、疑似クラス :focus-within を使って親要素にスタイルを適用します。たとえば、与えられた HTML コードでは、入力フィールドのいずれかがフォーカスされると、form 要素の背景が緑になります。子要素にスタイルを適用するには、label や input などの適切な CSS セレクタを使います。

<form>
  <label for="username">Username:</label>
  <input id="username" type="text" />
  <br />
  <label for="password">Password:</label>
  <input id="password" type="text" />
</form>

form {
  border: 2px solid #52b882;
  padding: 8px;
  border-radius: 2px;
}

form:focus-within {
  background: #7cf0bd;
}

label {
  display: inline-block;
  width: 72px;
}

input {
  margin: 4px 12px;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブ サービスを実行してください。その後、Web 8080 タブを更新してウェブ ページをプレビューできます。

まとめ

おめでとうございます！あなたは「Focus Within」の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。