A propriedade “indeterminate” é fascinante. Poucos sabem que as caixas de seleção têm um estado visual adicional diferente de verificado e não verificado.
indeterminate é uma propriedade (não há atributo para isso) que você pode usar para colocar este pequeno traço em uma caixa de seleção que você viu de vez em quando.
A configuração “indeterminate” como true não afeta o valor da caixa de seleção, e o único caso de uso razoável em que consigo pensar são caixas de seleção aninhadas.
“indeterminate” não funciona apenas para caixas de seleção. Também pode ser usado para botões de rádio e elementos de progresso. Vamos pegar um grupo de botões de rádio nos quais nenhum botão de opção está selecionado. Quando você não está pré-selecionando um elemento em um grupo de botões de rádio, nenhum deles é selecionado e nenhum deles é selecionado – portanto, todos estão em estado indeterminado.
O que é legal, que também pode usar a pseudo classe CSS: pseudo-classe “:indeterminate” para elementos selecionados que podem ser úteis para mostrar componentes específicos da interface do usuário quando nenhum botão de rádio em um grupo está selecionado ainda.
O que é interessante sobre a propriedade “indeterminate” é que você pode configurá-la como true ou false e isso afetará a pseudo-classe para caixas de seleção, mas não para rádios. Lidando com botões de rádio, o estado de seleção atual de um grupo está sempre correto.
E apenas para mencioná-lo por causa da conclusão dos elementos de progresso também corresponderá ao seletor, incluindo :indeterminate quando eles não têm um atributo de valor definido.
A definição de MDN para indeterminate é a seguinte:
Isto indica que uma caixa de seleção ou botões de opção não têm valor e estão em estado indeterminado. As caixas de seleção alteram a aparência para se assemelhar a um terceiro estado. Não afeta o valor do atributo verificado e, ao clicar na caixa de seleção, o valor será definido como falso.
Artigos relacionados:
defaultValue – Propriedades do HTMLInputElements
HTML – Radio vs Checkbox
Uma maneira pouco conhecida de criar um arquivo no Linux
Setar página html para utilizar charset/encode UTF-8
HTML – Recarregar automaticamente página
Remover e adicionar atributos HTML condicionalmente no Vue.js
Ideia básica de como efetuar HTML linting com CSS
CSS – Comportamento em ambiente responsivo entre Max-width e elementos sem esta propriedade
Dica sobre escapar HTML em banco de dados