Pseudo-classe CSS :default
Usa la pseudo-classe CSS :default per selezionare e applicare stili agli elementi predefiniti. Scopri la pseudo-classe ed esercitati con gli esempi.
La pseudo-classe :default corrisponde all'elemento predefinito in un gruppo di elementi associati, come il radio button inizialmente selezionato tramite l'attributo checked, anche se nel frattempo l'utente ha selezionato un valore diverso. A differenza di :checked, che riflette lo stato interattivo attuale, :default corrisponde solo allo stato predefinito iniziale dell'elemento.
Questa pseudo-classe può essere usata solo sugli elementi <button>, <input> (quando type="checkbox" o type="radio") e <option>.
Versione
Sintassi
Codice di sintassi CSS :default
:default {
css declarations;
}Esempio del selettore :default usato per il tag <input>:
Esempio di codice 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>Esempio del selettore :default usato per il tag <input> con un attributo type:
Altro esempio di codice 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>