### [チェックボックスと複数選択の選択にトランジションを追加する方法](https://wpforms.com/developers/how-to-add-transitions-to-checkbox-and-multiple-choice-selections/) **公開日:** 2020年6月16日 **著者:** Umair Majeed **抜粋:** このチュートリアルでは、CSSを使用してチェックボックスと複数選択のフォームフィールドにクールなトランジションを追加する方法を説明します。 **コンテンツ:** フォームの**チェックボックス**と**複数選択**フィールドをより魅力的にしたいですか？選択肢が選択されたときにスムーズなトランジションを追加することで、フォームの視覚的な魅力を高め、ユーザーインタラクションを向上させることができます。 このガイドでは、CSSを使用してスタイリッシュなトランジションを実装する方法を説明します。 ## フォームの設定 まず、**チェックボックス**および/または**複数選択**フィールドを含むフォームを作成します。フォームの作成に役立つ情報が必要な場合は、[最初のフォームの作成方法に関するガイド](https://wpforms.com/docs/creating-first-form/)をご覧ください。 CSSで使用するため、フォームIDとフィールドIDをメモしておいてください。これらのIDを見つける方法がわからない場合は、[フォームとフィールドIDの見つけ方に関するガイド](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id)を確認してください。 ## トランジションスタイルの追加 トランジションを実装するには、サイトにCSSを追加する必要があります。カスタムCSSの追加方法がわからない場合は、[WordPressサイトにCSSを追加する方法に関するガイド](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)を確認してください。 上記のCSSは、フォームID **999**にのみ適用されます。これは、ご自身のフォームIDに合わせて変更する必要があります。**field\_27**と**field\_3**のフィールドIDも、フォーム内の**チェックボックス**と**複数選択**フィールドのフィールドIDに合わせて更新する必要があります。 各**チェックボックス**と**複数選択**フィールドには独自のIDがあるため、フォームに2つ以上ある場合は、CSSを複製し、フィールドID番号を変更して、それぞれをコンマで区切るだけです。 CSSトランジションの詳細については、[このドキュメントを参照してください](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)。 これで、フォームの**チェックボックス**と**複数選択**のトランジションを作成するためにCSSを正常に追加できました。 訪問者が入力中にテキストフォームフィールドがページから飛び出すようにするCSSを追加したいですか？[フォームフィールドフォーカスにCSSを追加する方法](https://wpforms.com/developers/how-to-add-css-to-the-form-field-focus/)に関するチュートリアルをご覧ください。 **カテゴリ:** スタイリング **タグ:** CSS ---