• 最终的效果图

    image.png

    • 使用到的方法 :before 伪元素，html 转义字符 参考地址
    • less 源码 里面我自定义的变量可以自行修改。 ``` input[type=”checkbox”]{ position: relative; outline: none; &::before{
      1.   content: "";
      2.   display: block;
      3.   position: absolute;
      4.   width: @px24;
      5.   height: @px24;
      6.   line-height: @px22;
      7.   .text-align();
      8.   border: 1px solid @mainColor;
      9.   background-color: @whiteColor;
      10.   .border-radius(4 / @layremvalue);
      } } input[type=”checkbox”]:checked{ &::before{
      1.   content: "\2714";
      2.   color: @mainColor;
      3.   font-size: @px22;
      }

    }

    2. - less 编译后的 css

    input[type=”checkbox”] { position: relative; outline: none; } input[type=”checkbox”]::before { content: “”; display: block; position: absolute; width: 0.12rem; height: 0.12rem; line-height: 0.11rem; text-align: center; border: 1px solid #1273c4; background-color: #fff; border-radius: 0.02rem; -webkit-border-radius: 0.02rem; -moz-border-radius: 0.02rem; } input[type=”checkbox”]:checked::before { content: “\2714”; color: #1273c4; font-size: 0.11rem; }

    ```