純粋な CSS でカスタムラジオボタンとチェックボックス機能を実装する

1. 効果を達成する

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 CSS3 ボックスシャドウプロパティ

boxShadow プロパティは、ボックスに 1 つ以上のドロップシャドウを追加します。このプロパティは、カンマで区切られた影のリストであり、各影は 2 ～ 4 個の長さの値、オプションの色の値、およびオプションの inset キーワードで指定されます。省略された長さの値は 0 です。

文法：

box-shadow: h-shadow v-shadow ぼかしスプレッドカラーインセット;

2.3 CSS3 トランジションプロパティ

transition プロパティは、要素の遷移効果を設定するために使用されます。 4 つの省略形プロパティは次のとおりです。

遷移プロパティ

遷移期間

遷移タイミング関数

遷移遅延

文法

transition: プロパティ期間タイミング関数遅延;

2.4 CSS3 :checkedセレクタ

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

2.5 CSS要素+要素セレクタ

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

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

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

3 コードの実装

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">
    <タイトル></タイトル>
    <スタイル タイプ="text/css">
      ＃主要 {
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
        flex-wrap: ラップ;
      }
 
      ＃包む {
        位置: 相対的;
        マージン: 10px;
      }
 
      。アイテム {
        幅: 100ピクセル;
        高さ: 100px;
        背景色: #9E9E9E;
        位置: 相対的;
        ボックスシャドウ: 0 0 0 3px #dbe0e3;
        遷移: すべて 0.5 秒;
        カーソル: ポインタ;
      }
 
      .item画像{
        幅: 20px;
        高さ: 20px;
        位置: 絶対;
        下: 0px;
        右: 0px;
        不透明度: 0;
      }
 
            入力[type="radio"],
      入力[type="チェックボックス"] {
        表示: なし;
      }
 
      入力:チェック済み+ラベル.item {
        ボックスシャドウ: 0 0 0 3px #00a3ff;
        色: #FFFFFF;
        背景色: #efad4c;
      }
 
      入力:チェック済み+ラベル.item画像{
        不透明度: 1;
      }
      
      。コンテンツ {
        フォントサイズ: 30px;
        テキスト配置: 中央;
        行の高さ: 100px;
      }
</スタイル>
  </head>
  <本文>
    <div id="メイン">
      
      <h1>複数選択</h1>
      <div id="wrap">
          <input type="チェックボックス" name="1" id="item1" />
        <ラベルの項目1">
          <div class="item">
            <div class="content">
              1
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
      <div id="wrap">
      
        <input type="チェックボックス" name="1" id="item2" />
        <ラベルの項目2">
          <div class="item">
            <div class="content">
              2
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
      <div id="wrap">
      
        <input type="チェックボックス" name="1" id="item3" />
        <ラベル>
          <div class="item">
            <div class="content">
              3
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
      <div id="wrap">
      
        <input type="チェックボックス" name="1" id="item4" />
        <ラベル>
          <div class="item">
            <div class="content">
              4
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
      <div id="wrap">
      
        <input type="チェックボックス" name="1" id="item5" />
        <ラベル>
          <div class="item">
            <div class="content">
              5
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
      
      <h1>単一選択</h1>
      <div id="wrap">
          <input type="radio" name="1" id="item6" />
        <ラベルの項目6">
          <div class="item">
            <div class="content">
              1
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
      <div id="wrap">
      
        <input type="radio" name="1" id="item7" />
        <ラベルの項目7">
          <div class="item">
            <div class="content">
              2
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
      <div id="wrap">
      
        <input type="radio" name="1" id="item8" />
        <ラベルの項目="item8">
          <div class="item">
            <div class="content">
              3
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
      <div id="wrap">
      
        <input type="radio" name="1" id="item9" />
        <ラベルの項目="item9">
          <div class="item">
            <div class="content">
              4
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
      <div id="wrap">
      
        <input type="radio" name="1" id="item10" />
        <ラベル>
          <div class="item">
            <div class="content">
              5
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </ラベル>
      </div>
    </div>
  </本文>
</html>

純粋な CSS でカスタムラジオボタンとチェックボックスを実装する方法に関するこの記事はこれで終わりです。より関連性の高い CSS カスタムラジオボタンとチェックボックスについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: IE、Firefox、Chromeブラウザではスペースの表示が異なります

>>: MySQL をベースにしたシンプルな検索エンジンを実装する