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 プロパティは、ボックス (要素) をフロートさせるかどうかを指定します。 プロパティ値:
要素が浮く仕組み: 要素は水平方向に浮動します。つまり、要素は左右にしか移動できず、上下には移動できません。フロート要素は、その外端が包含ボックスまたは別のフロートボックスの境界に当たるまで、可能な限り左または右に移動します。フロート要素に続く要素は、その要素を囲みます。フロート要素の前の要素は影響を受けません。 フロートをクリアする - clear を使用します。 要素をフロートすると、周囲の要素が再配置されます。これを回避するには、clear プロパティを使用します。 clear プロパティは、フローティング要素が要素のどちらの側にも表示されないことを指定します。
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 を応援していただければ幸いです。 |
>>: Mysql ALTER TABLE はフィールドを追加するときにテーブルをロックしますか?
ワーカープロセスは、起動されると、まず自身の動作に必要な環境を初期化し、次に実行する必要があるイベン...
目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...
目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...
Docker デーモンは、 HTTP_PROXY 、 HTTPS_PROXY 、およびNO_PRO...
序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...
この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...
序文group by と distinctive のパフォーマンス比較について: インターネット上の...
方法1: .bashrcまたは.bash_profileファイルを変更するこれは、ホーム ディレクト...
目次1. 現在のシステムにMySQLがインストールされているかどうかを確認する2. インストールされ...
この記事では主に、クーポンの背景画像などでよく使われる CSS 円形ホローイングについて紹介し、皆さ...
最近、Linux を使用してローカルにログインしていたところ、正常にログインできず、次のエラー メッ...
1. 水平中央公開コード: html: <div class="parent&quo...
この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...
履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...
この記事では、jsでスライダーをドラッグする方法の具体的なコードを参考までに共有します。具体的な内容...