: padrão - CSS-Tricks

Anonim

O :defaultpseudo seletor corresponderá ao padrão em um grupo de elementos associados, como o botão de opção em um grupo de botões que é selecionado por padrão, mesmo se o usuário tiver selecionado um valor diferente.

input(type="radio"):default + label:after ( content: ' (default)'; color: #999; font-style: italic; )

O CSS acima direciona o rótulo que vem imediatamente após o botão de opção selecionado padrão em um grupo de botões de opção:

  • vermelho
  • verde
  • azul

O rótulo do botão de opção verde será seguido pelo texto “(padrão)” em texto cinza e itálico em navegadores compatíveis.

  • vermelho
  • verde
  • azul

Os exemplos incluem o botão de envio padrão em um grupo de botões, a opção padrão de um menu pop-up, o botão de rádio que tem o checkedatributo definido no HTML (como visto em navegadores de suporte) e as caixas de seleção que são marcadas por padrão.

Mais recursos

  • Demo
  • Página MDN em: padrão
  • Especificações W3C CSS3 UI
  • Seletores W3C de nível 4

Suporte para navegador

Navegadores diferentes têm diferentes níveis de suporte. O Firefox oferece suporte completo. Os navegadores Webkit oferecem suporte a botões de opção, mas não ao rádio ou caixas de seleção, e o Opera é o inverso, oferecendo suporte a botões de rádio e caixas de seleção, mas não no envio.

  • O Opera oferece suporte :defaultpara caixas de seleção e botões de rádio.
  • Navegadores Webkit, incluindo Chrome e Safari, oferecem suporte :defaultno botão de envio
  • O Firefox suporta :defaultcaixa de seleção, rádio e tipos de entrada de envio.
  • O Internet Explorer não é compatível :defaultcom caixa de seleção, rádio ou tipos de entrada de envio.
cromada Safári Raposa de fogo Ópera IE Android iOS
10 5 4 10 Nenhum Nenhum 5