Uma caixa de seleção é um elemento HTML que permite ao usuário estilizar uma caixa de seleção com CSS. Pseudoelementos como:before,:after, hover e:checked podem ser usados para alterar a aparência de uma caixa de seleção. Para alterar a aparência da caixa de seleção, o usuário deve primeiro ocultar a caixa de seleção padrão. Isso é feito definindo a propriedade de visibilidade como “oculto”.
Para garantir que o usuário tenha uma boa experiência visual, é importante que os web designers e desenvolvedores usem bastante os recursos de estilo do CSS. As caixas de seleção também podem ser estilizadas para melhorar sua aparência, assim como outros elementos HTML Estilize uma caixa de seleção com CSS.
As caixas de seleção não podem usar propriedades CSS como cor, fonte, borda, largura e altura. Nesta postagem, falaremos sobre as propriedades CSS que você pode usar para alterar as caixas de seleção e como elas podem melhorar sua UI/UX.
Como estilizar uma caixa de seleção com CSS
Criar HTML
Use um
Adicionar CSS
Oculte as caixas de seleção definindo a propriedade de visibilidade com o valor “oculto”. Use a pseudoclasse:checked, que ajuda a ver quando a caixa de seleção está marcada. Estilize o rótulo com as propriedades largura, altura, plano de fundo, margem e raio da borda. Defina a posição como “relativa”. Estilize a classe “exemplo de caixa de seleção” definindo a exibição como “bloco” e especificando as propriedades de largura e altura. Em seguida, especifique o raio da borda, a transição, a posição e outras propriedades. Agora o controle deslizante está na posição desmarcada. Para mover o botão deslizante, precisamos saber se a caixa de seleção está marcada. Quando marcada, devemos alterar a propriedade left do elemento label. Usamos o combinador + para selecionar o irmão do rótulo, logo ao lado dele.
FAQ
Como marcar uma caixa de seleção usando CSS?
O seletor de pseudoclasse CSS:checked representa qualquer elemento radio ( ), caixa de seleção ( ) ou opção ( em um ) que está marcada ou alternada para um estado ativado.
Como aplicar CSS na entrada da caixa de seleção?
basta adicionar class=”caixa de seleção” às suas caixas de seleção. Em seguida, crie esse estilo em seu código css. Você ainda precisará adicionar a classe para que ela funcione no IE, e ela não funcionará em outros navegadores não-IE que não suportam o IE.
Como eu alinho uma caixa de seleção em HTML CSS?
Defina a propriedade vertical-align como “bottom”, que é consistente em todos os navegadores. Defina a propriedade position como “relative” para posicionar o elemento em relação à sua posição normal.
Você pode estilizar caixas de alerta em CSS?
A caixa de alerta padrão em JavaScript não oferece a opção de aplicar CSS. Para estilizar sua caixa de alerta, primeiro você precisa criar uma personalizada. A caixa de alerta personalizada será criada usando jQuery e os estilos serão aplicados ao CSS.
By Maxwell Gaven
Trabalho com TI há 7 anos. É divertido observar a constante mudança no setor de TI. TI é meu trabalho, hobby e vida.