カスタムチェックボックスの作り方

1. もともとあるinputを隠す

input {
position:absolute;
height: 0px;
}

1. :checkedにさせるコンテンツの追加

input:checked ~ label::before {
content:"[x]";
}

※~は兄弟

サンプル

<style>
input[type=checkbox] {
position: absolute;
height: 0px;
}
input:not(:checked) ~ label::before {
content: "[-]";
}
input:checked ~ label::before {
content: "[x]";
}
</style>
<input type="checkbox" id="aaa-field"/>
<label for="aaa-field">aaa</label>