自定义 checkbox、 radio 样式

由于浏览器默认的 checkbox 和 radio 的样式无法直接被修改，因此如果想要自定义 checkbox 和 radio 的样式需要利用 <label> 标签的 for 属性来修改与其绑定的 checkbox 或 radio 的样式。当 <label> 标签被选中后，与其 for 属性所绑定的对应 id 的 <input> 元素也会被选中，所以可以利用这一点来设置自定义的样式。

解决思路

要自定义 checkbox 和 radio 的样式，首先要清除 checkbox 和 radio 的默认样式。由于浏览器默认的 checkbox 和 radio 的样式无法直接被修改，因此可以通过设置 display、 visibility 或 opacity 属性隐藏 checkbox 和 radio。

接下来需要设置与 checkbox 或 radio 绑定的 <label> 标签的样式，可以通过设置背景图片的方法或使用伪元素来自定义样式。

方法1 设置背景图片

制作雪碧图预定义 checkbox 和 radio 的样式。使用伪类选择器 :checked 控制 checkbox 或 radio 被选中时其对应的 <label> 标签的 background-position 属性的变化来达成样式变化的目的。

方法2 使用伪元素

CSS3 引入了 ::before 和 ::after 来区分伪元素和伪类。 ::before 和 ::after 会为当前元素创建一个子元素作为伪元素，通过设置其 content 属性来为伪元素添加内容。

使用 <label> 标签的伪元素来创建 checkbox 或 radio 未被选中时的样式，然后使用伪类选择器 :checked 控制 checkbox 或 radio 被选中时其对应的 <label> 标签的伪元素的样式。

注：由于设置伪元素相当于给元素添加子元素，所以可以通过设置父元素为 position: relative;，伪元素为 position: absolute; 来控制伪元素的位置。

转载于:https://www.cnblogs.com/rickkky/p/6694751.html