Pseudo-classe CSS :default
Use a pseudo-classe CSS :default para selecionar e aplicar estilos aos elementos predefinidos. Saiba mais sobre a pseudo-classe e pratique com os exemplos.
A pseudo-classe :default corresponde ao elemento predefinido num grupo de elementos associados, como o botão de opção inicialmente selecionado através do atributo checked, mesmo que o utilizador tenha entretanto selecionado um valor diferente. Ao contrário de :checked, que reflete o estado interativo atual, :default corresponde apenas ao estado predefinido inicial do elemento.
Esta pseudo-classe só pode ser utilizada nos elementos <button>, <input> (quando type="checkbox" ou type="radio") e <option>.
Versão
Sintaxe
Código de sintaxe CSS :default
:default {
css declarations;
}Exemplo do seletor :default utilizado na tag <input>:
Exemplo de código CSS :default
<!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 do seletor :default utilizado na tag <input> com um atributo type:
Outro exemplo de código CSS :default
<!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>