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 はフィールドを追加するときにテーブルをロックしますか?

推薦する

Ubuntuのソースリスト(ソースリスト)を変更する方法詳細説明

導入Ubuntu のデフォルトのソースは国内サーバーではないため、更新されたソフトウェアのダウンロー...

MySQL 5.7.24 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、参考までにMySQL 5.7.24圧縮パッケージのインストールチュートリアルを紹介しま...

mysql charset=utf8 本当に意味が分かりますか

1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...

MySQL 起動失敗の問題とシナリオ分析

1. ワンストップソリューション1. 問題の分析と特定 # MySQL設定ファイルを見つけて、MyS...

Ubuntu システムでタイムゾーンと時刻を変更する方法

Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...

React のグローバル状態管理の 3 つの基本メカニズムの調査

目次序文小道具コンテクスト州要約する序文最新のフロントエンド フレームワークはすべて、コンポーネント...

MySQL パフォーマンスの最適化: インデックスを効率的かつ正しく使用する方法

実践こそが真実をテストする唯一の方法です。この記事では、インデックスの全体的な使用法についてのみ説明...

MySQL DATEDIFF 関数を使用して 2 つの日付間の時間間隔を取得する方法

説明する2 つの日付間の時間間隔を返します。文法DateDiff(間隔、日付1、日付2 [、週の最初...

Linux インストール MySQL5.6.24 使用手順

Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...

ノードの対応するバージョンに関する簡単な説明 node-sass sass-loader

目次ノードのバージョンが一致しない、ノードをアップグレードまたはダウングレードするnvm を使用して...

Ubuntu 20.04にvncserverをインストールする方法

Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...

JS を使用して要素がビューポート内にあるかどうかを確認する方法

序文要素がビューポート内にあるかどうかを監視する2つの方法を共有する1. 位置計算Element.g...

新しい CSS :where および :is 疑似クラス関数とは何ですか?

:is と :where とは何ですか? :is()と:where()は、セレクターを作成するとき...

Angularが予期しない例外エラーを処理する方法の詳細な説明

前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...