Como alterar a cor de fundo de um elemento de caixa de seleção

Personalizar a cor de fundo do elemento Checkbox é uma maneira simples de criar formulários visualmente mais consistentes e profissionais em sua loja Shopify.

Neste tutorial, você aprenderá como alterar a cor de fundo de um elemento Checkbox no GemPages usando código personalizado.

Antes que você comece

Antes de seguir este tutorial, certifique-se de que já possui:

• Uma página criada no GemPages
• A Elemento de caixa de seleçãot adicionado à sua página
• Acesso ao editor GemPages

Passo 1: Abra o painel de código personalizado

Dentro do editor GemPages, localize o elemento Checkbox que deseja personalizar.

Clique com o botão direito do mouse no elemento Caixa de seleção.

Em seguida, selecione: Código personalizado

Isso abrirá o painel de Código Personalizado para o elemento selecionado.

Passo 2: Adicione o código CSS

Cole o seguinte código no editor de código personalizado:

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

  cor de destaque: #000000;

}

Anotações importantes

1. Substitua .elemento-classe

Você deve substituir:

.elemento-classe

com o nome da classe real do seu elemento Checkbox.

Você pode encontrar a classe do elemento no canto superior esquerdo do painel Código Personalizado.

Exemplo:

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

  cor de destaque: #1a73e8;

}

2. Substitua #000000 Com seu código de cores

Substitua o valor HEX pela cor da caixa de seleção que você preferir.

Exemplos: