CSS の :focus-within の楽しさについて簡単に説明します

CSS の :focus-within の楽しさについて簡単に説明します

Bステーションでパスワードを入力するときに目を覆っているこの画像を見たことがある人もいると思います

ここでは:focus-withinを使って少し遊んでみます

レイアウトはこんな感じです

外側にctnがありますが、これは無視できます。中央の固定位置です。

xPassword の「suo」アイコンはクリックするまでは非表示になっています。

このときxPasswordの後に「r6m」が表示されます

xPasswordをクリックすると、同じレベルの最初の画像「r6m」が非表示になります。

:focus-within ~ img的~ 這個符號是同級屁股后第一個的意思

同時にxPasswordの「suo」の画像が表示されます!この時、あなたはパスワードを入力し、私はそれを見ないふりをします。

<div class="ctn">
   
  <div class="xPassword">
    <input type="password" placeholder="パスワードを入力してください" class="input">
    <img src="http://suo.im/5UnnjN" alt=""> 
  </div>
    
  <img src="http://r6m.cn/csAC" alt=""> 
    
</div>
.ctn {
     位置: 相対的;
    幅: 318ピクセル;
    マージン: 100px 自動;
    高さ: 370ピクセル;
    パディング: 20px;
    ボックスのサイズ: 境界線ボックス;
    背景: #fff;
    zインデックス: 10;
    ボックスシャドウ: 0 0 15px #cfcfcf;
    
}
.ctn h2 {
  フォントサイズ: 20px;
  フォントの太さ: 太字;
  下部マージン: 30px;
}
.ctn 入力 {
  パディング: 10px;
  幅: 100%;
  境界線: 1px 実線 #e9e9e9;
  境界線の半径: 2px;
  アウトライン: なし;
  ボックスのサイズ: 境界線ボックス;
  フォントサイズ: 16px;
}
画像 {
    位置: 絶対;
    上位: -23%;
    左: 50%;
    幅: 80ピクセル;
    高さ: 自動;
    変換: translate(-50%, 0);
}

.xパスワード画像{
  表示: なし;
  幅: 103px;
  高さ: 自動;
  最高: -26%;
}

//上記は無価値なので無視して構いません。次の2つが重要なポイントです。xPassword:focus-within ~ img {
  表示: なし;
}

.xPassword:フォーカス内画像{
  表示: ブロック;
}

CSS の :focus-within の楽しさについての記事はこれで終わりです。CSS の :focus-within に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  XshellがvirtualBox仮想マシンに接続できない問題の解決策

>>:  TypeScript インターフェースの紹介

推薦する

MySQL で 1 つのテーブルのフィールドを使用して別のテーブルのフィールドを更新する方法

1. 1列を変更する 学生の更新、都市c s.city_name = c.name を設定します こ...

見落とされがちなMETAタグの特殊効果(ページ遷移効果)

Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...

マークアップ言語 - 画像の置き換え

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQLはカスタム関数を使用して親IDまたは子IDを再帰的に照会します

背景: MySQL では、レベルに制限がある場合、たとえば、ツリーの最大深度を事前に決定できる場合、...

Youdaの新しいプチビューの実装

目次序文導入ライブ使いやすいルートスコープマウント要素の指定ライフサイクルコンポーネントグローバル状...

Linux での MySQL 5.7.18 yum のアンインストールからインストールまでのプロセスの図

いろいろ苦労しましたが、やっと yum インストールの手順がわかりました。以前、バイナリ パッケージ...

Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します

純粋なフロントエンド実装:切片上傳斷點續傳。斷點續傳カットとアップロードに基づいて実装する必要があり...

div画像マーキーシームレス接続実装コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...

GIFアニメーション効果を模倣した自動ビデオ再生を実現するWeChatアプレットの例

需要背景:ミニプログラムページに GIF ダイナミック画像を挿入しますが、GIF 画像は通常サイズが...

Vue.js で AntV X6 を使用する手順の例

目次0x0 はじめに0x1 インストール0x2 ノードサイドバー0x3 統合例0x0 はじめにプロジ...

スケルトン スクリーンの読み込みプレースホルダー アニメーション効果を実装するための CSS + HTML (アニメーション付き)

効果上から下へフェードアウト ソースコードhtml、Angular構文を使用して、必要な構文を取得す...

UbuntuはCUDAの複数のバージョンをインストールし、いつでも切り替えることができます

CUDA とは何かを紹介するのではなく、複数の CUDA バージョンの共存とリアルタイム切り替えをど...

CSS 疑似要素を使用して複数の連続する要素のスタイルを制御する方法

CSS 疑似要素を使用して要素を制御する場合、一部の要素のスタイルを変更する必要があることがよくあり...

LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています

概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...