チェックボックス要素の背景色を変更する方法

チェックボックス要素の背景色をカスタマイズすることは、Shopifyストアで視覚的に一貫性があり、よりプロフェッショナルなフォームを作成するための簡単な方法です。

このチュートリアルでは、GemPagesのチェックボックス要素の背景色をカスタムコードを使用して変更する方法を学びます。

あなたが始める前に

このチュートリアルを進める前に、以下のものがすべて揃っていることを確認してください。

• GemPagesで作成されたページ
• A チェックボックス要素あなたのページに追加されました
• GemPagesエディターへのアクセス

ステップ1：カスタムコードパネルを開く

GemPagesエディタ内で、カスタマイズしたいチェックボックス要素を探します。

チェックボックス要素を右クリックします。

次に選択します: カスタムコード

これにより、選択した要素のカスタムコードパネルが開きます。

ステップ2：CSSコードを追加する

以下のコードをカスタムコードエディタに貼り付けてください。

.element-class input[type=”checkbox”] {

  アクセントカラー: #000000;

}

注意事項

1.交換します .element-class

交換する必要があります：

.element-class

チェックボックス要素の実際のクラス名を指定します。

要素クラスは、カスタムコードパネルの左上隅にあります。

例：

.gf-checkbox-123 input[type=”checkbox”] {

  アクセントカラー: #1a73e8;

}

2.交換します #000000 カラーコード付き

HEX値を、お好みのチェックボックスの色に置き換えてください。

例：