修改checkbox样式

checkbox默认样式

以谷歌浏览器为例

    <div class="box">
      <input type="checkbox" />篮球 
      <input type="checkbox" />足球
      <input type="checkbox" />乒乓球
    </div>

自带默认margin: 3px 3px 3px 4px

默认框框样式

    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgb(118, 118, 118);
    box-sizing: border-box;

选中时的样式

修改checkbox默认样式

可以设置尺寸和边距

      input[type="checkbox"] {
    
        width: 20px;
        height: 20px;
        margin: 0;
      }

使用appearance: none隐藏默认checkbox的框框，重写框框样式

原理：通过绝对定位覆盖原多选框

      input[type="checkbox"] {
    
        width: 20px;
        height: 20px;
        margin: 0 4px 0 0;
        appearance: none;
        position: relative;
      }

示例一：

	  /** 未被选中的样式*/
      input[type="checkbox"]::before {
    
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
      }
      /** 选中的样式 */
      input[type="checkbox"]:checked::before {
    
        content: "\2713";   /* 2713表示勾勾* */
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #7d7d7d;
        border-radius: 4px;
        color: #7d7d7d;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 20px;
      }

效果图：

示例二：

	   /** 未被选中的样式*/
      input[type="checkbox"] {
    
        width: 20px;
        height: 20px;
        margin: 0 4px 0 0;
        appearance: none;
        position: relative;
        background: wheat;
        border-radius: 50%;
      }
      /** 选中的样式*/
      input[type="checkbox"]:checked::before {
    
        content: "";
        background: orange;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        border: none;
        border-radius: 50%;
      }

效果图：