技術標籤：csshtml

一、我們先寫好HTML的程式碼

我這裡是寫的一個登入介面

 <label for="1">
      <input type="checkbox" id="1" class="ma">
      <span class="one"></span>
            記住密碼
 </label>
 <label for="2">
     <input type
 
="checkbox" id="2" class="ma">
     <span class="two"></span>
           自動登入
  </label>
       

我們用span標籤用來覆蓋原有的checkbox
這是效果圖

二、css程式碼新增

我們將原有的框改為透明

.ma {
        margin: 30px 0 30px 50px;
        width: 20px;
        height: 20px;
        cursor
 
: pointer;
        opacity: 0;
    }

再修改span樣式讓他變成一個你想要的寬和高
程式碼如圖

.ma[type=checkbox]+span{
    display: inline-block;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    border: .02rem solid #0D1529;
    background-color: transparent;
    position: absolute;
    cursor: pointer;
}

完成之後效果大概是這樣

.ma[type=checkbox]:checked+span::after{
    content:'\2714' ;
    color: blue;
    position: absolute;
    font-size: 20px;
    left: 2px;
    bottom: -2px;
}

content裡面可以放任意的特殊字元並且修改大小和顏色
最後我們就成功了