1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: ':default'
slug: 'Web/CSS/:default'
tags:
- CSS
- Layout
- NeedsMobileBrowserCompatibility
- Pseudo-class
- Reference
- Web
translation_of: 'Web/CSS/:default'
---
<div>{{CSSRef}}</div>
<p>La <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>:default</code></strong> representa qualsevol element de formulari que sigui el predeterminat entre un grup d'elements relacionats.</p>
<p>Aquest selector es pot utilitzar en els elements {{htmlelement("button")}}, <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> i {{htmlelement("option")}}.</p>
<pre class="brush: css no-line-numbers">/* Selects any default <input> */
input:default {
background-color: lime;
}</pre>
<p>Els elements agrupats que permeten seleccions múltiples també poden tenir múltiples valors predeterminats, és a dir, poden tenir diversos elements seleccionats inicialment. En aquest cas, <em>tots</em> els valors predeterminats es representen utilitzant la pseudo-classe <code>:default</code>. Per exemple, podeu aplicar un estil a les caselles de selecció predeterminades d'un grup de caselles de selecció.</p>
<h2 id="Sintaxi">Sintaxi</h2>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="Exemple">Exemple</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><input type="radio" name="season" id="spring">
<label for="spring">Spring</label>
<input type="radio" name="season" id="summer" checked>
<label for="spring">Summer</label>
<input type="radio" name="season" id="fall">
<label for="spring">Fall</label>
<input type="radio" name="season" id="winter">
<label for="spring">Winter</label>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}
</pre>
<h3 id="Resultat">Resultat</h3>
<p>{{EmbedLiveSample("Example")}}</p>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Sense canvis.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td><span id="result_box" lang="ca"><span>Defineix la semàntica HTML associada i la validació de restriccions.</span></span></td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Sense canvis.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td><span id="result_box" lang="ca"><span>Definició inicial, però sense la semàntica associada</span></span></td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>10.0</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>{{CompatNo}}</td>
<td>10.0</td>
<td>5.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("2.0")}}</td>
<td>{{CompatNo}}</td>
<td>10.0</td>
<td>5.0</td>
</tr>
</tbody>
</table>
</div>
|
