iOS スタイルの選択ボックスの開閉機能を実装するための純粋な CSS

iOS スタイルの選択ボックスの開閉機能を実装するための純粋な CSS

1 効果

デモアドレス: https://www.albertyy.com/2020/7/check2.html

別の記事: https://www.jb51.net/css/735639.html

2 知識ポイント

2.1 <label> タグ

HTML では、<label> タグは通常、<input> タグと一緒に使用されます。<label> タグは、入力要素のラベル (マーカー) を定義します。ラベル要素は、ユーザーに特別な効果をもたらすものではありません。<label> タグの目的は、マウス ユーザーの使いやすさを向上させることです。ユーザーが <label> タグ内のコンテンツをクリックすると、ブラウザーはラベルに関連付けられたコントロールに自動的にフォーカスを移動します。<label> タグは、ラジオ ボタンやチェック ボタンでよく使用されます。このタグを使用した後は、ラベル タグ内のコンテンツをクリックして、対応するラジオ ボタンやチェック ボタンを選択することもできます。

<label> タグの構文形式:

<label for="関連コントロール ID" form="フォーム ID のリスト">テキスト コンテンツ</label>

関連付けられたコントロールの ID は、通常、入力要素の ID を参照します。HTML5 では、新しい属性 form が追加されました。form 属性は、スペースで区切られた、属する 1 つ以上のフォームの ID リストを指定するために使用されます。<label> タグがフォーム タグ <form> 内にない場合は、form 属性を使用して、属するフォームを指定する必要があります。

<label> 要素には特別なスタイル設定の考慮事項はありません。構造的には、<label> は単純なインライン要素なので、<span> 要素や <a> 要素とほぼ同じ方法でスタイルを適用できます。

2.2 CSS フロートプロパティ

float プロパティは、ボックス (要素) をフロートさせるかどうかを指定します。

プロパティ値:

価値説明する
要素を左にフロートします。
要素を右にフロートします。
なしデフォルト値。要素はフロートせず、テキスト内に表示される場所に表示されます。
継承するfloat プロパティの値を親要素から継承することを指定します。

要素が浮く仕組み:

要素は水平方向に浮動します。つまり、要素は左右にしか移動できず、上下には移動できません。フロート要素は、その外端が包含ボックスまたは別のフロートボックスの境界に当たるまで、可能な限り左または右に移動します。フロート要素に続く要素は、その要素を囲みます。フロート要素の前の要素は影響を受けません。

フロートをクリアする - clear を使用します。

要素をフロートすると、周囲の要素が再配置されます。これを回避するには、clear プロパティを使用します。 clear プロパティは、フローティング要素が要素のどちらの側にも表示されないことを指定します。

注意: 絶対位置に配置された要素は float プロパティを無視します。

2.3 CSS3 :checkedセレクタ

:checked セレクターは、チェックされているすべての入力要素に一致します (ラジオ ボタンまたはチェックボックスにのみ適用されます)。

2.4 CSS要素+要素セレクタ

要素 + 要素セレクターは、指定された最初の要素の直後の要素 (内部ではない) を選択するために使用されます。

たとえば、<div> 要素の直後にあるすべての <p> 要素を選択します。

div+p{ 背景色:黄色; }

3 コードの実装

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
   .スイッチ{
    パディング: 0;
    幅: 500ピクセル;
    マージン: 自動;
   }
 
   .スイッチ li {
    クリア: 両方;
    行の高さ: 44px;
    下境界線: 1px 実線 #CCC;
    リストスタイル: なし;
   }
 
   .スイッチ入力{
    表示: なし
   }
 
   .スイッチラベル{
    幅: 52px;
    背景: #CCC;
    高さ: 28px;
    境界線の半径: 14px;
    フロート: 右;
    マージン: 8px 10px 0 0;
    ボックスシャドウ: 0 1px 2px rgba(0, 0, 0, .1) インセット;
    カーソル: ポインタ;
   }
 
   .スイッチラベルem{
    幅: 26px;
    高さ: 26px;
    フロート: 左;
    マージン: 1px;
    境界線の半径: 13px;
    ボックスの影: 2px 3px 8px rgba(0, 0, 0, .1);
    背景: #FFF;
   }
 
   .スイッチ入力:チェック済み+ラベル{
    背景: #a4d714;
   }
 
   .スイッチ入力:チェック済み+ラベルem {
    フロート: 右;
   }
 
   .スイッチ入力:disabled+label {
    不透明度: 0.5
   }
  </スタイル>
 </head>
 <本文>
  <ul class="スイッチ">
   <li>
    <input type="checkbox" name="ストレージ" id="date">
    デフォルトで閉じる <label for="date"><em></em></label>
   </li>
   <li>
    <input type="checkbox" name="Storage2" id="blance" チェック済み="">
    デフォルトでは、<label for="blance"><em></em></label>はオンになっています
   </li>
   <li>
    <input type="checkbox" name="Storage2" id="integral" disabled="">
    利用できません <label for="integral"><em></em></label>
   </li>
  </ul>
 </本文>
</html>

純粋な CSS で iOS スタイルの開閉選択ボックスを実装する方法についての記事はこれで終わりです。より関連性の高い CSS iOS 開閉選択ボックスのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  JS 実用的なオブジェクト指向スネークゲームの例

>>:  Mysql ALTER TABLE はフィールドを追加するときにテーブルをロックしますか?

推薦する

nginxワーカープロセスループの実装

ワーカープロセスは、起動されると、まず自身の動作に必要な環境を初期化し、次に実行する必要があるイベン...

Node.JS で悪天候のリアルタイム警報システムを構築する

目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

CentOS 7 での Docker プロキシの設定 (Linux での Systemd サービスの環境変数設定)

Docker デーモンは、 HTTP_PROXY 、 HTTPS_PROXY 、およびNO_PRO...

Linux 面接で最もよく聞かれる 10 の質問のまとめ

序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...

簡単な計算機を実装する小さなプログラム

この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...

MySQL で重複を削除するには、distinct または group by を使用する必要がありますか?

序文group by と distinctive のパフォーマンス比較について: インターネット上の...

Linux でログインタイムアウト後に非アクティブなユーザーを自動的にログアウトする

方法1: .bashrcまたは.bash_profileファイルを変更するこれは、ホーム ディレクト...

CentOS7環境にMySQL5.5データベースをインストールする

目次1. 現在のシステムにMySQLがインストールされているかどうかを確認する2. インストールされ...

CSS 円形ホローイングの実装(クーポン背景画像)

この記事では主に、クーポンの背景画像などでよく使われる CSS 円形ホローイングについて紹介し、皆さ...

mysql ローカルログインでポート番号を使用してログインできない問題の解決策

最近、Linux を使用してローカルにログインしていたところ、正常にログインできず、次のエラー メッ...

幅と高さが可変の要素を中央に配置するための CSS ソリューション

1. 水平中央公開コード: html: <div class="parent&quo...

CSS で高さが不明な垂直中央揃えを実装する

この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...

Linux で履歴コマンドを表示および実行する方法

履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...

jsを使用してスライダーをドラッグする効果を実現します

この記事では、jsでスライダーをドラッグする方法の具体的なコードを参考までに共有します。具体的な内容...