O HTML fornece os vários parâmetros de entrada para inserir os valores, incluindo botões, campos de texto, caixas de seleção, listas ordenadas/não ordenadas e muito mais. Mais especificamente, se você estiver criando um site e deseja que os visitantes possam escolher vários itens de um menu, adicionar uma caixa de seleção é uma ótima opção.

As caixas de seleção permitem que os usuários selecionem mais de uma opção no menu.

Este tutorial indicará:

• Como criar uma caixa de seleção com html?
• Como estilizar caixas de seleção com CSS?

Como criar uma caixa de seleção com html?

Siga as etapas fornecidas para criar uma caixa de seleção com HTML.

Etapa 1: Adicionar cabeçalho

Inclua um título na página HTML usando o

marcação. Por exemplo, utilizamos tags de título de nível 1 “

”E adicionou o texto como“Melhores sites de tutoriais”:

Melhores sites de tutoriais

Saída

Etapa 2: Crie uma caixa de seleção

Agora, adicione uma etiqueta junto com o atributo de classe e coloque o nome da etiqueta entre as tags. Depois disso, defina um elemento com o tipo “Caixa de seleção”Para criar uma caixa de seleção com um nome de etiqueta:

Linuxhint

Como você pode ver, a caixa de seleção é criada com sucesso com a legenda “Linuxhint”:

Para adicionar outra opção de caixa de seleção, crie novamente uma nova etiqueta, incorpore o nome da etiqueta entre “”Tags e insira o“”Elemento com tipo“Caixa de seleção”:

Criadores de conteúdo TSL

Pode -se observar que várias caixas de seleção são adicionadas na página da web:

Vamos seguir em direção à próxima seção para estilizar a caixa de seleção.

Como estilizar a caixa de seleção com CSS?

Para estilizar a caixa de seleção com CSS, siga as instruções fornecidas.

Etapa 1: Aplique o estilo na caixa de seleção

Aplique as seguintes propriedades no “.principal”Classe que é usada para acessar o elemento:

• Adicione a propriedade Display especificando o valor “bloquear”Para tratar um elemento como um bloco.
• Defina a propriedade de posição como “relativo”Para mudar o elemento em relação a si mesmo e ao elemento pai.
• Defina o preenchimento com o valor “45px”Para definir a largura da área de preenchimento à esquerda e a margem fundo com o“15px”Valor para criar espaço em torno dos elementos fora de qualquer fronteira definida.
• Defina o tamanho da fonte do rótulo:

.principal
Display: Block; Fonte-Size: 20px;
Posição: relativa;
Margin-Bottom: 15px;
Cursor: ponteiro; preenchimento-esquerda: 45px;

Etapa 2: Ajuste a posição da caixa de seleção

Defina algumas propriedades CSS no “.Linuxhint”Classe para ajustar a posição da caixa de seleção, como segue:

• Defina a posição como “absoluto”.
• Defina a altura e a largura como “25px”
• Defina a cor de fundo como “preto”:

.Linuxhint
Posição: Absoluto; cor de fundo: preto;
topo: 0;
Esquerda: 0;
Altura: 25px;
Largura: 25px;

Etapa 3: Defina a cor de fundo quando a caixa de seleção estiver "verificada"

Agora, a propriedade cor de fundo é usada para definir o que será exibido quando a caixa de seleção for verificada:

.Entrada principal: verificado ~ .Linuxhint
cor de fundo: RGB (231, 209, 12);

Etapa 4: Defina o estilo de caixa de seleção

Nesta etapa, use o código fornecido abaixo para definir a propriedade na caixa de seleção. A caixa de seleção será exibida na caixa de seleção quando for verificada e não será exibida quando não for verificada:

.Linuxhint: depois
contente: "";
Posição: Absoluto;
Mostrar nenhum;

Agora, defina a propriedade Display como um “bloquear”Para exibir a marca de seleção quando a caixa de seleção estiver verificada:

.Entrada principal: verificado ~ .Linuxhint: depois
exibição: bloco;

Por fim, use a propriedade CSS Transform no retângulo de caixa de seleção para fazer a borda parecer um “marcação" forma:

.principal .Linuxhint: depois
Esquerda: 8px;
Inferior: 5px;
Largura: 6px;
Altura: 12px;
fronteira: RGB sólido (250, 238, 238);
largura de borda: 0 4px 4px 0;
Transformar: girar (45deg);

Saída

Você aprendeu o método mais fácil para denominar a caixa de seleção usando CSS.

Conclusão

Para estilizar uma caixa de seleção usando CSS, primeiro, crie uma caixa de seleção com a ajuda do HTML. Em seguida, defina o atributo de classe no elemento HTML e aplique o CSS na caixa de seleção. Depois disso, estilize as caixas de seleção usando as propriedades CSS na classe, como posição de caixa de seleção, cor de fundo e tamanho das caixas de seleção usando as propriedades de altura e largura. Este post demonstrou o método para modelar a caixa de seleção usando CSS.