radio和checkbox的自定义样式

原文链接

拓展链接

input控件中,checkbox和radio不像text可以比较随意的设置样式。 在Firefox里同事设置宽和高可以改变checkbox和radio的大小,除此之外,在chrome等浏览器里对他们设置宽高是不起作用的。

本文给出了两种自定义checkboxhe和radio样式的方法:

方法一:appearance + :after

该方法的主要思路是:首先利用appearance属性清除radio或checkbox的原生样式,然后在此基础添加上一些自定义的样式和动画效果,以达到自定义样式的目的。 用到了:after伪元素生成控件内部的选中样式。

input[type="radio"],
input[type="checkbox"] {
	appearance: none;
}
1
2
3
4

直接看demo:

demo截图:

demo

方法二:opacity: 0(display:none) + 额外标签

这个方法是多数UI库使用的方法:首先将checkbox和radio隐藏,然后让相邻它的标签(或label标签)伪装成它,并设置样式, 利用css3的“相邻兄弟选择器”( + 或 ~ ),通过checkboxhe和radio的选中切换该元素不同的样式,

直接看demo:

时间仓促做的有点粗糙,只能简单地用绿色圆点和方点示意选中状态了。

对比一下

  • 方法一改变原控件的样式,只针对该控件做样式修改; 方法二相当于把原控件隐藏,添加其他标签代替了它
  • 方法一比较简单,但应用场景单一,只能用于这种表单填写的场景;方法二较复杂,需要更多的标签支持, 但该方法应用场景更灵活,可用来实现tab页切换等效果,见另一篇checkbox的应用
  • 两个缺点都是兼容性不好,只支持高版本浏览器,方法一的appearance在用时还需要加上浏览器前缀
  • 等等

有说的不对的地方,望重拍指正。

最近更新: 4/24/2019, 11:03:05 PM