###### tags: `Bootstrap`
# Bootstrap 4 客製化 Radio、Checkbox 表單

## Custom Checkbox
bootstrap 預設的樣式：

1. 在外層`div`加上： `.custom-control` 和 `.custom-checkbox` 的class
2. 在`input`加上 `.custom-control-input` 的class
3. 在`label`加上 `.custom-control-label`

HTML：

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
  </div>
</form>

加完class後再進行修改，針對 `.custom-checkbox` 的 `before` 做顏色修改 ：
CSS：

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #977e00;
    background-color: #977e00;
}

即可完成客製化樣式：

## Custom Radio buttons

bootstrap 預設的樣式：

1. 在外層`div`加上： `.custom-control` 和 `.custom-radio` 的class
2. 在`input`加上 `.custom-control-input` 的class
3. 在`label`加上 `.custom-control-label`

HTML：

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio</label>
  </div>
</form>

加完class後再進行修改，針對 `.custom-radio` 的 `before` 和 `after` 做修改 ：

CSS：

//before
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #707070;
    background-color: #fff;
}

//after
//在 label 被點擊後，顯示一個圓形的svg，radioActive.svg
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url(../../images/icon/radioActive.svg);
}

即可完成客製化樣式：

參考：
[Bootstrap 4 Custom Forms](https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp)