【Contact Form 7】チェックボックスのカスタマイズ方法

// ===============================================================
// チェックボックス
// ===============================================================
// デフォルトのスタイルを消す
.checkbox-cl01 input {
  display: none;
}

// ラベル文字の左側の余白：チェックボックの枠が入るスペース＋ラベル文字との余白
.checkbox-cl01 input + span {
  padding-left: 28px;
  display: inline-block;
  position: relative;
}
// チェックボックスの枠とチェックマークの共通書式
.checkbox-cl01 input + span::after,
.checkbox-cl01 input + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
}
// チェックボックスの枠
.checkbox-cl01 input + span::before {
  border: 1px solid #aaaaaa;
  background-color: #ffffff;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
// チェックマークにチェックが付いていない時
.checkbox-cl01 input + span::after {
  border: none;
  background-color: #FF3399;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
// チェックマークにチェックが付いた時
.checkbox-cl01 input:checked + span::after {
  display: block;
}

// チェックボックス行の文字の太さ
.dt{
  font-weight: normal;
}