Como estilizar o bootstrap de bootstrap Caixa de seleção personalizada

Um bootstrap de estrutura CSS popular permite que os desenvolvedores criem facilmente e rapidamente aplicativos da Web prontos para celular e responsivos. Possui centenas de classes pré-projetadas CSS. Tudo o que você precisa fazer é adicionar a classe necessária ao elemento específico. No entanto, para especificar estilos personalizados para elementos, os CSs podem ser usados.

Este artigo abordará:

• Qual é o elemento html “”?
• Como estilizar o bootstrap de bootstrap Caixa de seleção personalizada?

Qual é o elemento html “”?

Em HTML, o “”Elemento com o tipo“Caixa de seleção”Cria uma caixa de seleção na página da web. Além disso, as caixas de seleção permitem verificar mais de uma caixa de seleção por vez.

Exemplo

Antes de avançar em direção ao assunto principal deste post, vamos ver como é a caixa de seleção padrão. Para fazer isso, adicione o “”Elemento com a legenda e especifique o“”Elemento com o tipo“Caixa de seleção”E o atributo“verificado”. O "verificado”Atributo com o valor“verificado”É utilizado para verificar a caixa por padrão:

Estilo padrão de caixa de seleção

Saída

Como estilizar o bootstrap de bootstrap Caixa de seleção personalizada?

Para fazer a caixa de seleção personalizada, experimente as etapas mencionadas abaixo:

Etapa 1: Crie um arquivo HTML

Primeiro, crie um arquivo HTML seguindo as seguintes instruções:

• Adicione um “”Elemento com o“P-4"E classes" fluidos de contêineres ".
• Em seguida, especifique o cabeçalho usando o “

  " elemento.

• Adicionar três “”Elementos e atribui -lhes a classe“Verifique personalizado”.
• Dentro de "”Elementos, adicione o“”Elemento com o“tipo" Valor do atributo "Caixa de seleção”. Somente a primeira entrada deve estar associada ao “verificado”Atributo.
• Por fim, mencione o “”Elemento para a marca de seleção.

Html

Selecione o menu

pizza



Hambúrguer



Batatas fritas

As etapas abaixo devem ser implementadas na seção CSS.

Etapa 2: ocultar a caixa de seleção padrão

Como precisamos criar uma caixa de seleção personalizada, é necessário escondê -la. Para fazer isso, acesse o “Verifique personalizado”Classe e aplique os estilos no“”Elementos:

.Verifique a entrada personalizada
Posição: Absoluto;
opacidade: 0;

Aqui:

• ““posição" com o "absoluto”O valor define a posição do elemento em relação ao seu elemento pai.
• ““opacidade"Com o valor"0”Esconde o“”Elementos.

Etapa 3: estilo a classe “Cheque personalizada”

.Verifique personalizado
Size da fonte: 22px;
Posição: relativa;
exibição: bloco;
Potding-Left: 35px;
Cursor: Ponteiro;
Margin-Bottom: 12px;

A explicação das propriedades acima mencionadas é discutida abaixo:

• ““tamanho da fonte”Propriedade define o tamanho da fonte do elemento.
• ““posição" com o "relativo”O valor ajusta a posição do elemento correspondente à sua posição atual.
• ““mostrar" com o "bloquear”O valor fornece toda a largura do rótulo.
• ““preenchimento-esquerda”Adiciona algum espaço à esquerda do conteúdo do elemento.
• ““cursor”Define o estilo do ponteiro do mouse.
• ““Margin-Bottom”Adiciona espaço no fundo do elemento.

Etapa 4: Crie uma caixa de seleção personalizada

Para fazer a caixa de seleção personalizada, adicione as seguintes propriedades CSS:

.Marca de seleção
Posição: Absoluto;
Altura: 27px;
Largura: 27px;
topo: 0;
Esquerda: 0;
Background-Color: RGB (233, 233, 233);
Radio de fronteira: 10px;

Aqui:

• ““altura "e" largura”Propriedades definem o tamanho do elemento.
• ““top "e" esquerda "com" 0”Os valores não especificam espaço na parte superior e à esquerda do elemento.
• ““cor de fundo”Determina a cor de fundo do elemento.
• ““Radio de fronteira”Roups os cantos do elemento.

Pode -se observar que as caixas de seleção personalizadas foram criadas com sucesso:

Etapa 5: estilize a caixa de seleção quando verificada

As propriedades abaixo do CSS são implementadas na caixa de seleção quando for verificado:

.Verifique a entrada personalizada: verificado ~.Marca de seleção
Background-Color: #6202CF;
Radio de fronteira: 5px;

Até agora, as caixas de seleção são estilizadas como mostrado no GIF abaixo:

Agora, vamos criar a marca de seleção nas seções abaixo.

Etapa 6: Crie a marca de seleção

Para ocultar a marca de seleção quando estiver desmarcada, implemente as propriedades mencionadas abaixo:

.Marca de seleção: depois
contente: "";
Mostrar nenhum;
Posição: Absoluto;

O ".Marca de seleção: depois"É mencionado para acessar a classe"marca de seleção "e": depois”É uma pseudo-classe, utilizada para implementar estilos após o conteúdo:

• ““contente”Especifica o conteúdo inserido.
• ““mostrar"Com o valor"nenhum”Esconde a marca de seleção.

Etapa 7: mostre a marca de seleção quando verificada

Quando o usuário verifica a caixa de seleção, ele deve exibir a marca de seleção. Para fazer isso, a marca de seleção é aplicada com o CSS “mostrar”Propriedade com o valor“bloquear”:

.Verifique a entrada personalizada: verificado ~.Marca de seleção: depois
exibição: bloco;

Etapa 8: estilo a marca de seleção

Aqui estão as propriedades do CSS para criar a marca de taco:

.Verifique personalizado .Marca de seleção: depois
Esquerda: 8px;
topo: 5px;
Largura: 9px;
Altura: 14px;
Fronteira: branco sólido;
largura de borda: 0 3px 3px 0;
Transformar: girar (45deg);

De acordo com o código fornecido:

• ““Esquerda "e" Top”Especifique o espaço nas laterais esquerda e superior da marca.
• ““largura e altura”Ajuste a área da marca de ticks.
• ““fronteira”Propriedade cria a marca.
• ““largura de fronteiraPropriedade especifica as fronteiras superior, direita, inferior e esquerda. Aqui apenas as propriedades certas e inferiores são especificadas.
• ““transformar”Propriedade com o valor“girar (45deg)”Gire a marca de ritmo a 45 graus.

Saída

Isso foi tudo sobre como estilizar uma caixa de seleção personalizada usando o bootstrap.

Conclusão

Para estilizar a caixa de seleção personalizada do bootstrap, primeiro, crie uma página HTML. Adicione o "" e ""Com o tipo"Caixa de seleção”Elementos. Então, várias propriedades do CSS são usadas para estilizá -las. Mais especificamente, para fazer a marca de taco, o CSS “fronteira "e" largura de fronteiraAs propriedades são utilizadas. Este post explicou como estilizar uma caixa de seleção personalizada no bootstrap.