改变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