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