修改CheckBox样式并与文本保持水平对齐

| 效果

| 兼容性

✅ IOS
✅ Android

| 代码

HTML

<div>
    <input type="checkbox" name="checkbox"/>
    <span>勾选后消息不再提示</span>
</div>

CSS

input {
    outline: none;
    width: vw(1);
    height: vw(1);
    -webkit-appearance: checkbox;
    margin-right: vw(10);
    visibility: hidden;
    
    // 对齐关键
    vertical-align: middle;
    margin-top: -2px;
  }

  span {
    vertical-align: middle;
  }

  input[type=checkbox] {
    margin-right: 5px;
    cursor: pointer;
    width: vw(25);
    height: vw(25);
    position: relative;
  }

  input[type=checkbox]:after {
    width: vw(25);
    height: vw(25);
    content: " ";
    display: inline-block;
    visibility: visible;
    padding: 0px vw(2);
    border-radius: vw(3);
    background: #fcfeff;
    border: 1px solid #a4a4a4;
  }

  input[type=checkbox]:checked:after {
    content: "";
    background-image: url('~@/assets/images/gold/popup/icon-select.png');
    background-position: center;
    text-align: left
  }