改變checkbox樣式問題

選擇1

 

選擇2 選擇3 選擇4 選擇5

<form action="">
  <label for="test">選擇1
            <input type="checkbox" id="test">
            <div class="checkboxdiv"></div>
        </label> 選擇2
  <input type="checkbox"> 選擇3
  <input type="checkbox"> 選擇4
  <input type="checkbox"> 選擇5
  <input type="checkbox">
</form>

 

label {
  font-size: 12px;
/*   調整vertical-align的值實現水平對齊 */
  vertical-align: 3px;
}
/* 將默認的樣式隱藏，使用另外一個div模擬 */
#test {
  display: none;
}

.checkboxdiv {
  width: 30px;
  height: 30px;
  display: inline-block;
    border-radius: 3px;
        border:1px solid #85a2cd;
        margin-right: 10px;
        vertical-align: middle;
}

#test:checked ~.checkboxdiv {
  background-color: red;
}

 https://codepen.io/anon/pen/VrmjvG