はじめに
この実験では、可視的で編集不可の接頭辞付きの入力ボックスを作成します。CSSとHTMLを使用して、接頭辞と入力フィールドを持つコンテナ要素を作成します。また、:focus-within
疑似クラスセレクタを使用して親要素をスタイリングし、入力フィールドとのインタラクション時により良いユーザーエクスペリエンスを提供します。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、可視的で編集不可の接頭辞付きの入力ボックスを作成します。CSSとHTMLを使用して、接頭辞と入力フィールドを持つコンテナ要素を作成します。また、:focus-within
疑似クラスセレクタを使用して親要素をスタイリングし、入力フィールドとのインタラクション時により良いユーザーエクスペリエンスを提供します。
VM内には既にindex.html
とstyle.css
が用意されています。
可視的で編集不可の接頭辞付きの入力を作成するには、次の手順に従ってください。
display: flex
を使用して、.input-box
クラスのコンテナ要素を作成します。<input>
フィールドの境界線と輪郭を削除し、代わりに親要素に適用して入力ボックスのように見せます。<input>
フィールドとインタラクションする際に、:focus-within
疑似クラスセレクタを使用して親要素をスタイリングします。以下がHTMLコードです。
<div class="input-box">
<span class="prefix">+30</span>
<input type="tel" placeholder="210 123 4567" />
</div>
以下がCSSコードです。
.input-box {
display: flex;
align-items: center;
max-width: 300px;
background: #fff;
border: 1px solid #a0a0a0;
border-radius: 4px;
padding-left: 0.5rem;
overflow: hidden;
font-family: sans-serif;
}
.input-box.prefix {
font-weight: 300;
font-size: 14px;
color: #999;
}
.input-box input {
flex-grow: 1;
font-size: 14px;
background: #fff;
border: none;
outline: none;
padding: 0.5rem;
}
.input-box:focus-within {
border-color: #777;
}
右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。
おめでとうございます!接頭辞付き入力の実験を完了しました。技術力を向上させるために、LabExでさらに多くの実験を行って練習してください。