CSS :default Pseudo Classe
Use a pseudo-classe CSS :default para selecionar e estilizar elementos padrão. Leia sobre a pseudo-classe e pratique com exemplos.
A pseudo-classe :default corresponde ao elemento padrão num grupo de controles de formulário associados — aquele que o navegador enviaria (ou pré-selecionaria) caso o utilizador não altere nada. Um exemplo típico é o botão de opção que começa selecionado através do atributo checked.
A distinção principal é entre o estado padrão e o estado atual:
:defaultcorresponde ao elemento que era o padrão no carregamento da página, e continua a corresponder a esse elemento mesmo após o utilizador escolher outra opção.:checkedcorresponde ao que está atualmente selecionado, por isso acompanha as interações do utilizador.
Num grupo de botões de opção com um botão marcado como checked, :default aponta sempre para esse botão original, enquanto :checked segue a escolha do utilizador. Isso torna :default útil para indicar "esta é a opção recomendada/original" sem alterar o estilo enquanto o utilizador clica.
Onde se aplica
:default corresponde apenas a estes elementos:
<button>— o botão de envio padrão de um formulário (o primeiro botão de envio).<input>comtype="checkbox"outype="radio"— uma caixa de seleção/botão de opção marcado por padrão.<input>comtype="submit"outype="image"— o controle de envio padrão do formulário.<option>— uma opção que possui o atributoselected.
Não tem efeito em entradas de texto, no próprio <select>, nem em qualquer elemento que não seja de formulário.
Versão
Sintaxe
:default {
/* CSS declarations */
}Quase sempre é combinado com um seletor de elemento ou atributo para que a regra afete apenas o controle desejado, por exemplo input:default ou input[type="submit"]:default.
Exemplo com botão de opção marcado por padrão
O botão de opção marcado com checked mantém o brilho azul mesmo após selecionar Não, porque :default recorda o padrão no momento do carregamento.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:default {
box-shadow: 0 0 2px 2px #1c87c9;
}
.example {
margin: 20px auto;
font-size: 20px;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<p>Do you like coffee?</p>
<input type="radio" name="radios" id="ex1" checked />
<label for="ex1">Yes</label>
<br />
<input type="radio" name="radios" id="ex2" />
<label for="ex2">No</label>
</div>
</body>
</html>Exemplo com o botão de envio padrão
O primeiro botão de envio de um formulário é o seu controle padrão — pressionar Enter num campo o ativa. Aqui, :default destaca esse primeiro botão para que os utilizadores possam ver qual ação é executada por padrão.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 700px;
}
input[type=submit] {
padding: .6em 1em;
font-size: 1em;
width: 100px;
margin-bottom: 1em;
}
input[type=submit]:default {
border: 4px dotted #8ebf42;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<form action="#">
<input type="submit" value="Yes" />
<input type="submit" value="No" />
</form>
</div>
</body>
</html>Exemplo com uma opção selecionada por padrão
Para um menu <select>, :default aponta para o <option> que possui o atributo selected — o valor exibido antes de o utilizador abrir o menu suspenso.
option:default {
font-weight: bold;
color: #1c87c9;
}<label for="size">Size:</label>
<select id="size">
<option>Small</option>
<option selected>Medium</option>
<option>Large</option>
</select>Aqui Medium é estilizado porque possui o atributo selected, mesmo após o utilizador escolher um tamanho diferente.
Notas e advertências
- Um padrão por grupo. Um grupo de botões de opção deve ter no máximo um padrão; se vários forem marcados como
checked, apenas o último é considerado o padrão no DOM. :defaulté estático,:checkedé dinâmico. Use:defaultpara indicar a escolha original/recomendada e:checkedpara reagir à seleção atual do utilizador.- Botões de envio. Apenas o primeiro controle do tipo envio num formulário é o padrão, portanto
:defaultcorresponde a um único botão mesmo quando existem vários. - Combine com pseudo-classes de estado como
:disabled,:enabled,:requirede:optionalpara criar formulários claros e totalmente estilizados.
Suporte de navegadores
:default é suportado em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.