使用伪类的 content 属性实现自定义选择框

大多数情况下,浏览器默认的的 checkbox 样式都满足不了我们对外观的需求,这时候就需要在 checkbox 的基础上实现自定义样式,核心是如何使用“打勾”效果

有三种方式:

  • 使用图上实现
  • 使用元素,隐藏两个边框,并旋转
  • 使用伪元素 content 属性中的特殊字符

这里主要说明第三种,目前很多网站使用的 WebFont 就是在 content 属性中写字体代码实现图标。其实浏览器自带很多特殊符号,其中又分 html 特殊符号与 css 特殊符号。在 css 的特殊符号中,就有“打勾”这个符号,先看效果图:

自定义选择框浏览器效果
自定义选择框浏览器效果

图中可以看出,我使用了\2714编码的特殊符号实现了一个优雅的打勾符号,并且设定了颜色。实现过程也不难,首先是 DOM 结构,因为 input 元素不支持伪元素,所以我们需要额外放置一个 checkbox 同级的元素用于挂靠伪元素:

然后设置样式(使用 less),主要有三种状态:正常,选中以及禁用:

最后附上我在实际中使用的方式,自定义 react Checkbox 组件。以及 css 特殊符号编码对照表

发表评论

电子邮件地址不会被公开。 必填项已用*标注