ホームページ > 記事 > ウェブフロントエンド > CSS および HTML のカスタムチェックボックスの効果の詳細な説明

CSS および HTML のカスタムチェックボックスの効果の詳細な説明

小云云オリジナル: 2017-12-19 10:26:361857ブラウズ

チェックボックスは比較的一般的な HTML 関数のはずですが、ブラウザーに付属のチェックボックスはあまり見栄えがよくないことが多く、効果はブラウザーごとに異なります。視覚効果を美しく統一する必要性から、チェックボックスのカスタマイズが提案されました。この記事では主に CSS+HTML のカスタムチェックボックスの効果について説明します。お役に立てれば幸いです。

実装アイデア

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

ネイティブ入力を非表示にして、スタイル定義プロセスをラベルに任せます (それなら、チェックボックスのスタイルを直接変更しないのはなぜでしょうか? チェックボックスはブラウザのデフォルトのコンポーネントであるため、スタイルの変更はラベルほど便利ではありません)チェックボックスの多くの属性は、背景など機能しません。また、ラベルは基本的に p と同じスタイルで、「at your Mercy」です)
そして、選択イベントでは、「隣接セレクター ( cssの「E+F)」を入力してみましょう。 htmlのデフォルトのチェックボックスをそのまま利用できるので、jsシミュレーション選択の手間が省けます。

デモ

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

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 を使用してラベルのチェックボックススタイルをシミュレートすることもできます。ラベルはここでは分析されません。

CSS および HTML のカスタム チェックボックスの効果の詳細な説明

関連記事

CSS および HTML のカスタムチェックボックスの効果の詳細な説明