CSSチェックボックス効果の使い方を詳しく解説

今回はCSSチェックボックスエフェクトの使い方について詳しく解説します。CSSチェックボックスを使用する際の注意点は何ですか？実際の事例を見てみましょう。

実装アイデア純粋なCSS実装の主な手段は、labelタグのシミュレーション機能を使用することです。 label の for 属性は、入力自体がユーザーに表示されない場合でも、それに対応するラベルがあれば、ユーザーはラベル label を操作することでネイティブ入力を直接置き換えることができます。これにより、スタイル シミュレーションに余裕が生まれます。つまり、

ネイティブ入力を非表示にして、スタイル定義プロセスをラベルに任せます (それなら、チェックボックスのスタイルを直接変更しないのはなぜでしょうか? チェックボックスはブラウザのデフォルトのコンポーネントであるため、スタイルの変更はラベルほど便利ではありません)

background

など、チェックボックスの多くの属性は機能しません。ラベルはスタイルの点で基本的に p と同じです。js シミュレーションの選択の手間を省いて、html のデフォルトのチェックボックスを直接使用しましょう。

demo

DEMO の一部の CSS3 属性には Webkit プレフィックスしかないため、このページを表示するには Webkit Core を備えたブラウザを使用することをお勧めします

HTML コード:

<p class="wrap">
    <!-- `input`的id必须有，这个是label进行元素匹配所必需的 -->
    <!-- 可以看到每个input的id和label的“for”属性对应同一字符串 -->
<input type="checkbox" id="checkbox01" />
<label for="checkbox01"></label>
<input type="checkbox" id="checkbox02" />
<label for="checkbox02"></label>
<input type="checkbox" id="checkbox03" />
<label for="checkbox03"></label>
<input type="checkbox" id="checkbox04" />
<label for="checkbox04"></label>

HTML がビルドされ、次は対応するCSS。

.wrap {
  width: 500px;
  background-color: #EEE;
  border: 2px solid #DEF;
}
/* 隐藏所有checkbox */
input[type='checkbox'] {
  display: none;
}
/* 对label进行模拟.背景图片随便拼凑的，不要吐槽品味*/
/*   transition效果是做个背景切换效果，这里单纯演示而已，实际上这个过渡不加更自然*/
label {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: relative;
  background: url(//www.chitanda.me/images/blank.png);
  background-position: 0 0px;
  -webkit-transition: background 0.5s linear;
}
/*  利用相邻选择符和checkbox`:checked`的状态伪类来模拟默认选中效果（就是点击后那个勾号的效果）  */
/*如果这段代码注释，点击后将没有任何反馈给用户*/
/*因为label本身是没有点击后被选中的状态的，checkbox被隐藏后，这个状态只能手动模拟*/
input[type='checkbox']:checked+label {
  background-position: 0 -60px;
}

上記のコードの効果は以下の通りですが、問題ないようです。

しかしよく考えてみると、オプションに対応するプロンプトテキストが欠けているように思えます

CSSを知らない初心者は、この時点で最初にpタグまたはspanタグを使用してテキストを追加する可能性がありますラベルの後。しかし、このアプローチはあまりエレガントではありません。個人的には、CSS の ::before と ::after 疑似要素を使用することをお勧めします (::before と :before は同じものです。ただし、「疑似要素」と「疑似クラス」を区別するために、W3C は次のように記述することを推奨しています)メソッドは、疑似要素に :: を使用することです。そして、疑似クラスが使用されます:)

ここでは、疑似要素の具体的な内容については詳しく説明しません (実際、疑似要素に関する私の知識は、その使用に限られています)。私はこれを理解できないので、他の人を誤解させないでください)

/* 伪元素的生效很简单，定义`content`就好，其余的属性和普通p一样 */
label::after {
   content: attr(data-name);
   /*利用attr可以减少css代码量,data-name写在html部分的label属性里*/
  display: inline-block;
  position: relative;
  width: 120px;
  height: 60px;
  left: 100%;
  vertical-align: middle;
  margin: 10px;
}

もちろん、::after を使用してラベルのテキストをシミュレートできるため、::before を使用してラベルのチェックボックス スタイルをシミュレートすることもできます。ラベルはここでは分析されません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSSセレクターの使用方法の詳細な説明

CSSマージンの特別な使用スキルの詳細な説明

以上がCSSチェックボックス効果の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。