如何更改复选框元素的背景颜色

自定义复选框元素背景颜色是一种在 Shopify 商店中创建视觉上更一致、更专业的表单的简单方法。

在本教程中，您将学习如何使用自定义代码更改 GemPages 中复选框元素的背景颜色。

在你开始之前

在开始本教程之前，请确保您已具备以下条件：

• 在 GemPages 中创建的页面
• A 复选框元素已添加到您的页面
• 访问 GemPages 编辑器

步骤 1：打开自定义代码面板

在 GemPages 编辑器中，找到要自定义的复选框元素。

右键单击复选框元素。

然后选择： 自定义代码

这将打开所选元素的自定义代码面板。

步骤 2：添加 CSS 代码

将以下代码粘贴到自定义代码编辑器中：

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

  强调色：#000000；

}

重要注意事项

1.更换 元素类

您必须替换：

元素类

使用复选框元素的实际类名。

您可以在自定义代码面板的左上角找到元素类。

计费示例：

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

  强调色：#1a73e8；

}

2.更换 #000000 使用您的颜色代码

将十六进制值替换为您喜欢的复选框颜色。

例子：