一、前言

最近在做登录页面时，产品希望单选框checkbox的颜色能能与登录页的主题色相呼应，以达到更加美观和协调的效果。对于这个需求，我的第一反应是当下传统的自定义checkbox实现方案，即伪元素模拟checkbox。但在开发过程中发现，需要在定义在伪元素content中的文字符号（如√,✓,✔）不仅很难找到好看的符号，而且这些符号在mac和windows电脑上其大小和形状是有细微差别的。那业内的大佬们是怎么设计出即合理又美观的checkbox的呢？其实很简单，就是：<input> + <svg>。 先上效果图:

二、实现

1）选择喜欢的svg

iconfont上为我们提供了许许多多的图标，你需要做的只是选择一个你需要的图标，把图标颜色调成白色，然后把svg代码给复制出来，像这样：

2）写个html结构

<div id="remenber-me">
  <label for="remenber-me-checkbox">
  <input id="remenber-me-checkbox"
         type="checkbox"
   />记住我
   <i>
        <svg t="1624074974168" style="width: 13px;height: 13px;position: absolute" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2362" width="200" height="200"><path d="M400.924471 856.656781c2.856309 2.856663 8.375555 1.968781 12.326929-1.981886l99.271696-99.271341c3.951021-3.951729 4.838194-9.470266 1.981885-12.327992L149.539898 378.111187c-2.857017-2.856663-8.375555-1.969135-12.327284 1.981885l-99.270987 99.271342c-3.951021 3.951729-4.838548 9.470975-1.981885 12.327992L400.924471 856.656781z" fill="#ffffff" p-id="2363"></path><path d="M300.951182 740.852493c-4.473054 4.473762-4.897693 11.303404-0.945964 15.255133l99.271342 99.270633c3.951375 3.951375 10.781371 3.528152 15.254778-0.944547l571.530577-571.530931c4.474116-4.474116 4.897339-11.304112 0.945964-15.255133l-99.271342-99.270987c-3.951375-3.951729-10.780308-3.528152-15.255133 0.945964L300.951182 740.852493z" fill="#ffffff" p-id="2364"></path></svg>
   </i>
</label>
</div>

3）加上css样式

#remenber-me label{
  min-height: 17px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
  display: inline-block;
}
#remenber-me input{
  position: absolute;
  margin-left: -20px;
  margin-top: 2px;
  visibility: hidden; // 把真实的checkbox给隐藏掉
}
#remenber-me input:checked + i{
  background-color: #70cb7c;
  border: 1px solid #70cb7c;
}
#remenber-me i{ // 这里可以把i元素设计成一个圆或是其他形状checkbox
  width: 14px;
  height: 14px;
  padding-left:1px;
  padding-top:1px;
  cursor: pointer;
  position: absolute;
  top: 11px;
  left: 9px;
  border-radius: 2px;
  font-style: normal;
  border: 1px solid gray;
}
#remenber-me i:hover {
  border: 1px solid #70cb7c;
}

就这样，一个实用又好看的checkbox就做好啦！