HTMLのチェックボックスのカスタム効果の例

チェックボックスは比較的一般的な HTML 関数のはずですが、ブラウザーに付属のチェックボックスはあまり見栄えがよくないことが多く、効果はブラウザーごとに異なります。視覚効果を美しく統一する必要性から、チェックボックスのカスタマイズが提案されました。導入方法をまとめてみました。

実装アイデア

純粋なCSS実装の主な手段は、labelタグのシミュレーション機能を使用することです。 label の for 属性は、input 自体が表示されない場合でも、特定の input 要素に関連付けることができます。これに対応する label を作成した後、ユーザーは label タグを操作してネイティブの input を直接置き換えることができます。スタイルを提供します シミュレーションには余地が残ります。つまり、label标签的模拟功能。label的for属性可以关联一个具体的input元素，即使这个input本身不可被用户可见，有个与它对应的label后，用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是

隐藏原生input，样式定义的过程留给label （那为什么不直接改变checkbox的样式？因为checkbox作为浏览器默认组件，样式更改上并没有label那么方便，很多属性对checkbox都是不起作用的，比如background,而label在样式上基本和div一样'任人宰割')

而在选择事件上，由于css的“相邻选择符(E+F)”的存在，让我们可以直接利用html的默认checkbox，免去了js模拟选择的麻烦。

demo

DEMO的部分CSS3属性只写了webkit前缀，所以建议用webkit内核的浏览器查看本页
HTML代码：

<div 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不了解的新人可能这时候第一反应就是在label后面用p标签或者span标签来添加文字。不过这种方式都不怎么优雅。个人建议用css的::before和::after伪元素（::before和:before是一个东西。不过为了把“伪元素”和“伪类”区分出来，W3C建议的写法是伪元素用::而伪类用:）
伪元素的具体内容这里不多说，(其实是我也对它们的掌握就仅限于用用而已，对这个谈不上理解，就不误人子弟了)

/* 伪元素的生效很简单，定义`content`就好，其余的属性和普通div一样 */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模拟label的文字，那也就可以用::before模拟label

ネイティブ入力を非表示にし、スタイル定義プロセスを label に任せます (それなら、チェックボックスのスタイルを直接変更しないのはなぜでしょうか? チェックボックスはブラウザのデフォルトのコンポーネントであるため、スタイルはbackground など、多くの属性は checkbox に影響を与えませんが、label は基本的に同じです。スタイルで div として使用します')🎜

🎜選択イベントでは、CSS の「隣接セレクター (E+F)」の存在により、HTML のデフォルトのチェックボックスを直接使用できます。 jsシミュレーションの選択の必要性の問題。 🎜🎜demo🎜🎜DEMO の一部の CSS3 属性には Webkit プレフィックスしかないため、このページを表示するには Webkit コアを備えたブラウザを使用することをお勧めします
HTML コード: 🎜

rrreee

🎜HTMLの構築が完了しました。次は対応するCSSです。 🎜

rrreee

🎜 上記コードの効果は以下の通りで、問題ないようです。 🎜🎜しかし、よく考えてみると、何かが欠けているように思えます: オプションに対応するプロンプト テキスト
CSS を知らない初心者は、この時点で最初に label後で p タグまたは span タグを使用してテキストを追加します。しかし、このアプローチはあまりエレガントではありません。個人的には、CSS の ::before および ::after 擬似要素 (::before および :before) を使用することをお勧めします。 > ただし、「疑似要素」と「疑似クラス」を区別するために、W3C が推奨する記述方法は、疑似要素には :: を使用し、: を使用することです。 > 疑似クラスの場合）
ここでは、疑似要素の具体的な内容については詳しく説明しません（実際、疑似要素に関する私の知識はその使用に限られており、理解していないので説明しません）他の人に誤解を与えないでください)🎜

rrreee

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

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