Tamanho da caixa de seleção CSS

Neste artigo, discutiremos as propriedades do CSS para aumentar o tamanho de uma caixa de seleção. A caixa de seleção padrão na linguagem de marcação de hipertexto é pequena e às vezes pode ficar difícil de localizar na página da web. Discutiremos a altura, a largura e a transformação de propriedades comumente usadas do CSS. Implementaremos vários exemplos relacionados a esse fenômeno no ambiente do bloco de notas ++.

Exemplo 01: Aumentando o tamanho de uma caixa de seleção padrão usando propriedades de altura e largura por meio de tags de estilo CSS

Neste exemplo, aumentaremos o tamanho de uma caixa de seleção padrão que a linguagem de marcação de hipertexto fornece. A técnica de tag de estilo CSS será usada neste exemplo para dar à caixa de seleção um tamanho diferente. Ambas as propriedades de mudança de tamanho serão adicionadas a uma aula de estilo para a caixa de seleção neste exemplo.

No script acima, estamos começando com o cabeçalho do arquivo em que chamamos de tag css de "estilo". Dentro desta tag, adicionaremos uma classe para o elemento de entrada que representa a caixa de seleção Language Markup Hypertext. Vamos citar o tamanho da classe. Nesta classe, definiremos as propriedades que mudarão o tamanho da caixa de seleção. Primeiro, definiremos a propriedade de largura, dando -lhe um valor de "50px". Então, definiremos a propriedade de altura, dando o mesmo valor.

Depois disso, fecharemos as tags de estilo e cabeçalho do arquivo para abrir a etiqueta corporal. Na etiqueta corporal, começaremos dando a ele um título com uma tag "H1". Então, vamos abrir a tag de entrada. Nesta tag, definiremos o tipo do elemento de entrada rotulando -o como uma caixa de seleção. Depois disso, também chamaremos a classe de estilo de "tamanho" que criamos no cabeçalho do arquivo. No final, especificaremos -o como "verificado" por padrão e fechará a tag de entrada e o corpo.

Depois de salvar o script anterior e abri -lo em nosso navegador, obteremos a saída acima. Como resultado dos parâmetros de altura e largura nesta saída, a caixa de seleção se expandiu em tamanho.

Exemplo 02: Aumentando o tamanho de uma caixa de seleção padrão usando propriedades de altura e largura via CSS embutida

A abordagem de tag de estilo CSS em linha será utilizada para ajustar o tamanho da caixa de seleção neste exemplo. Aumentaremos uma caixa de seleção padrão oferecida pela linguagem de marcação de hipertexto neste exemplo. Ambos os recursos de mudança de tamanho serão aplicados a uma etiqueta de estilo dentro do elemento de entrada neste exemplo.

No início do script, abriremos uma etiqueta de estilo na etiqueta da cabeça apenas para o corpo do arquivo em que alinharemos o texto do corpo ao centro neste script. Em seguida, fecharemos o estilo e a etiqueta da cabeça para abrir a etiqueta corporal. Na etiqueta corporal, daremos um título para a página com a ajuda da tag "H1". Em seguida, abriremos a tag de entrada e definiremos o tipo de elemento de entrada, identificando -o como uma “caixa de seleção.”Depois disso, especificaremos o estilo da caixa de seleção usando o termo CSS em linha“ estilo.”Nesta chamada, definiremos as características de largura e altura, fornecendo valores de pixel. Em seguida, vamos defini -lo como "verificado" por padrão e fechar as tags de entrada e corpo. Vamos salvar este arquivo no “.formato html ”e abra -o em nosso navegador para obter a saída mostrada abaixo:

Podemos observar nesta saída que a caixa de seleção cresceu devido às propriedades de altura e largura, conforme definido dentro do atributo de estilo da tag de entrada.

Exemplo 03: Aumentando o tamanho de uma caixa de seleção padrão usando a propriedade Transform via tag de estilo CSS

Aumentaremos o tamanho de uma caixa de seleção padrão fornecida pela linguagem de marcação de hipertexto. Neste exemplo, a caixa de seleção terá um tamanho personalizado usando a técnica de tag de estilo CSS. Neste exemplo, a propriedade Transform será adicionada a uma classe de estilo de seleção que aumentará o tamanho da caixa de seleção padrão.

No script a seguir, começamos com o cabeçalho do arquivo, onde nomeamos a tag css "Style.”Dentro da tag de entrada, adicionaremos uma classe ao elemento de entrada que representa a caixa de seleção Hypertext Markup Language. Vamos então chamar o tamanho da classe. Dentro dele, criaremos o atributo que ajustará o tamanho da caixa de seleção. A propriedade Transform será definida e escrita com a palavra -chave de escala que aceitará o tamanho do tamanho de escala como uma entrada. Depois disso, fecharemos a etiqueta e o cabeçalho do estilo do arquivo para abrir espaço para a etiqueta corporal. Começaremos com uma etiqueta "H1" na etiqueta do corpo para dar um título. Em seguida, abriremos a etiqueta de entrada, onde rotularemos o elemento de entrada como uma caixa de seleção e descreveremos seu tipo lá. Depois disso, nomearemos a classe de estilo "tamanho" que estabelecemos no cabeçalho do arquivo. Finalmente, definiremos o padrão como "verificado" e fecharemos as tags de entrada e o corpo.

Vamos obter a saída acima depois de salvar o script anterior e abri -lo em nosso navegador. Nesta saída, podemos ver que a caixa de seleção se expandiu em tamanho devido à propriedade Transform.

Exemplo 04: Usando três propriedades CSS para aumentar o tamanho de uma caixa de seleção em um arquivo html

A abordagem de tag de estilo CSS em linha será utilizada para ajustar o tamanho da caixa de seleção neste exemplo. Todas as três propriedades CSS serão adicionadas a uma etiqueta de estilo dentro da tag de entrada neste exemplo. Aumentaremos o tamanho da caixa de seleção padrão oferecido pela linguagem de marcação de hipertexto.

Neste script, começaremos abrindo uma etiqueta de estilo na etiqueta da cabeça que se aplica apenas ao corpo do arquivo. Então, vamos centralizar o conteúdo do corpo. O estilo e as tags de cabeça serão fechados, permitindo que a etiqueta corporal seja aberta. Com a ajuda do elemento "H1" na etiqueta do corpo, daremos à página um título. Depois disso, usaremos o termo CSS embutido "estilo" para expressar o estilo da caixa de seleção. Nesta chamada, especificaremos as características de largura e altura, fornecendo valores de pixel para eles. Em seguida, também adicionaremos a propriedade de transformação nesta chamada para escalar a caixa de seleção de acordo. Depois disso, definiremos -o como "verificado" e fecharemos as tags de entrada e o corpo. Vamos salvar este arquivo no “.formato html ”e abra -o em nosso navegador para obter a saída mostrada abaixo:

Como resultado das propriedades de altura, largura e transformação nessa saída que foram definidas dentro da etiqueta de entrada, a caixa de seleção se expandiu em tamanho.

Conclusão:

Neste artigo, discutimos várias propriedades CSS que são usadas para aumentar o tamanho ou expandir uma caixa de seleção de tamanho padrão em um arquivo html. As duas primeiras propriedades são a altura e a largura que podem ser adicionadas a uma classe de estilo ou tag no elemento de entrada da linguagem de marcação de hipertexto. Essas propriedades foram usadas para aumentar o tamanho de uma caixa de seleção em duas técnicas CSS diferentes que são tags de estilo CSS e CSS embutido. Também implementamos a propriedade de transformação que o CSS fornece que usa a função de escala para expandir uma caixa de seleção padrão.