最近在做微信小程式，因為這個東西用的是自己的樣式，也不支援BOM，所以有些東西用以前做瀏覽器前端的經驗來看不太好弄，必須另闢捷徑。
  今天在做一個小程式專案，需要自定義checkbox複選框，自定義邊框和內部對號樣式，結合在網上搜到的東西以及自己理解，總算是做出來了。
 這裡主要是利用css3的偽類。
  廢話不多話，以下是原始碼實現。

 html結構大概是這樣的:

<label id="labelId" for="regular">
    <checkbox id="regular"/>
</label>

 css程式碼是這樣的：

#labelId{
    width:30px;
    height:30px;
    border-radius:4px;
    background-color: rgb(0,150,136);
    position: relative;
}
#labelId:after {
    content: '\00a0';
    display: inline-block;
    border: 4px solid #fff;
    border-top-width: 0;
    border-right-width: 0; 
    width: 18px;
    height: 10
 
px;
    -webkit-transform: rotate(-50deg);
    position: absolute;
    top:6px;
    left:4px;
}

效果如下：

選中前和選中後:

第二種

HTML:
<input type="checkbox" id="awesome">
<label for="awesome">Awesome!</label>

CSS:
input[type='checkbox']+label::before {
  content:'\a0';/*不換行空格*/
  display: inline-block;
 

  vertical-align: 0.2em;
  width:0.8em;
  height:0.8em;
  margin-right: .2em;
  border-radius:.2em;
  background: silver;/*複選框的背景色*/
  text-indent:0.15em;
  line-height: 0.65;
}
input[type='checkbox'] {
  /*隱藏掉原先實際的 checkbox 框，之所以沒用 display:none; 這種簡單直接的方式，是因為這種方法會把它從鍵盤 tab 鍵切換焦點的佇列中完全刪除*/
  position: absolute;
  clip:rect(0,0,0,0);
}
input[type='checkbox']:checked+label::before {
  content:'\2713'; /*對號的 Unicode字元*/
  background: yellowgreen;/*對號的顏色*/
}

效果如下：