:indeterminateé um seletor de pseudo-classe em CSS nomeado para um estado que não está marcado nem desmarcado. É esse estado intermediário que podemos considerar o “Talvez” entre as opções “Sim” e “Não”. O estado não está totalmente determinado, daí o nome: indeterminado.
Caixas de seleção indeterminadas
O lugar mais comum em que podemos ver isso em jogo é com as caixas de seleção em um formulário:
Existem algumas coisas peculiares :indeterminatequando se trata de caixas de seleção que vale a pena observar antes de se aprofundar em como podem ser selecionadas em CSS.
Não pode ser definido no HTML
Em primeiro lugar, não há como definir uma caixa de seleção para um estado indeterminado em HTML. No exemplo de abertura acima, pudemos definir a segunda caixa de seleção como marcada, dizendo isso explicitamente no HTML.
É lógico supor que poderíamos fazer o mesmo com um estado indeterminado:
Mas, infelizmente, esse não é o caso, então não use esse último exemplo em seu código.
No momento em que este artigo foi escrito, Javascript é o único meio de definir um estado indeterminado em uma caixa de seleção. Uma maneira de fazer isso é marcar uma caixa de seleção específica por ID:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;A limitação do exemplo acima é que a caixa de seleção nunca pode voltar a um estado indeterminado, uma vez que muda para outro estado. Em vez disso, podemos girar entre os estados marcado, não verificado e indeterminado:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Veja os estados da caixa de seleção de rotação da caneta de Geoff Graham (@geoffgraham) no CodePen.
É puramente um estado visual
Uma caixa de seleção ainda conta se foi marcada ou desmarcada, independentemente de termos ativado um estado indeterminado. Em outras palavras, indeterminado mascara o valor real da caixa de seleção e não conta como um valor próprio.
Sua aparência padrão é inconsistente em todos os navegadores
Como as entradas numéricas, um estado indeterminado não tem estilo consistente em todos os navegadores.
No geral, entretanto, aqui está o suporte para caixas de seleção indeterminadas.
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 28 | 3,6 | 6 | 12 | 6 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 | 12,2-12,4 |
Botões de rádio indeterminados
:indeterminate pode ser aplicado a botões de opção no nível do grupo, onde todo o grupo é considerado em um estado indeterminado se nenhuma opção for selecionada.
Veja os botões de rádio indeterminados da pena por Geoff Graham (@geoffgraham) em CodePen.
Devemos observar que usar :indeterminatepode não ser a melhor escolha no que diz respeito à experiência do usuário.
Barras de progresso indeterminadas
Também podemos aplicar :indeterminateao elemento em que nenhum valor foi definido explicitamente no HTML. Não há necessidade de Javascript, mas estilizar o elemento em si é uma coisa complicada que requer muito trabalho e consideração para consistência entre navegadores.
Veja o Pen Indeterminate Progress Element de Geoff Graham (@geoffgraham) em CodePen.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10,1 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |
Mais Informações
- Rascunho de trabalho dos seletores CSS de nível 4
- Caixas de seleção indeterminadas
- Botões de rádio indeterminados
- Elemento de progresso HTML5