チェックボックスフィールドのスタイルをカスタマイズする方法

チェックボックスフィールドの色をカスタマイズしますか？デフォルトでは、このフィールドは標準のWebスタイルを使用してフォームに表示されます。この記事では、CSSの力でこれがどれほど簡単に行えるかを順を追って説明します！

ただし、WPFormsブロックエディターを使用している場合は、カスタムCSSを必要とせずにこれらのスタイルを簡単に調整できます。詳細については、こちらの便利なガイドをご覧ください。フィールドスタイルとボタンのスタイルを変更すると、この記事のカスタムCSSでできることとまったく同じことをブロックエディターで実現できます。

この記事では、これらの変更を行うためにカスタムCSSの魔法を活用していきます。

フォームの作成

まず、フォームを作成し、必要なフィールドを追加します。これには少なくとも1つのチェックボックスフィールドが含まれます。

フォームの作成についてサポートが必要な場合は、こちらの便利なガイドを簡単に確認できます。

チェックボックスフィールドを追加したら、高度な設定タブをクリックし、CSSクラスにspecial-checkbox-buttonsを追加します。これをカスタムCSSを呼び出すためのトリガーとして使用します。

チェックボックスフィールドのスタイルのカスタマイズ

フォームを保存したら、CSSを追加できます。サイトにカスタムCSSを追加する方法や場所がわからない場合は、こちらのチュートリアルで確認してください。

.special-checkbox-buttons input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  margin: 0 !important;
  font: inherit !important;
  color: #e27730 !important;
  width: 1.15em !important;
  height: 1.15em !important;
  border: 0.15em solid #e27730 !important;
  border-radius: 0.15em !important;
  transform: translateY(-0.075em) !important;
  display: grid !important;
  place-content: center !important;
}

.special-checkbox-buttons input[type="checkbox"]::before {
  content: "" !important;
  width: 0.65em !important;
  height: 0.65em !important;
  transform: scale(0) !important;
  transition: 120ms transform ease-in-out !important;
  box-shadow: inset 1em 1em #e27730 !important;
	transform-origin: bottom left !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}

.special-checkbox-buttons input[type="checkbox"]:checked::before {
    transform: scale(1) !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

.special-checkbox-buttons input[type=checkbox]:checked:after {
	content: none !important;
}

このCSSは、境界線と選択の色を#e27730に変更しますが、選択が行われると小さなアニメーションも追加されます。

ブロックエディターのスタイリングを使用する場合でも、カスタムCSSを使用する場合でも、チェックボックスフィールドの色を簡単にカスタマイズできます。複数選択フィールドでも同じ機能をお探しですか？複数選択フィールドのスタイルをカスタマイズする方法の記事をご覧ください。