Checkbox: differenze tra le versioni

Versione delle 14:37, 12 nov 2019

Versione delle 14:14, 22 feb 2021

Riga 21:

=== Disabilitato ===

Come tutti i controlli, anche il ''checkbox'' può essere disabilitato per impedire all'utente di cambiarne lo stato; quando disabilitato tutto il controllo risulterà in grigio.

== Esempio ==

HTML:<syntaxhighlight lang="html">

<label class="container">1

<input type="checkbox" checked="checked">

<span class="checkmark"></span>

</label>

<label class="container">2

<input type="checkbox">

<span class="checkmark"></span>

</label>

<label class="container">3

<input type="checkbox">

<span class="checkmark"></span>

</label>

<label class="container">4

<input type="checkbox">

<span class="checkmark"></span>

</label>

</syntaxhighlight>CSS:<syntaxhighlight lang="css">

.container {

max-width: 640px;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

font-size: 13px;

}

ul.ks-cboxtags {

list-style: none;

padding: 20px;

}

ul.ks-cboxtags li{

display: inline;

}

ul.ks-cboxtags li label{

display: inline-block;

background-color: rgba(255, 255, 255, .9);

border: 2px solid rgba(139, 139, 139, .3);

color: #adadad;

border-radius: 25px;

white-space: nowrap;

margin: 3px 0px;

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-tap-highlight-color: transparent;

transition: all .2s;

}

ul.ks-cboxtags li label {

padding: 8px 12px;

cursor: pointer;

}

ul.ks-cboxtags li label::before {

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

font-family: "Font Awesome 5 Free";

font-weight: 900;

font-size: 12px;

padding: 2px 6px 2px 2px;

content: "\f067";

transition: transform .3s ease-in-out;

}

ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {

content: "\f00c";

transform: rotate(-360deg);

transition: transform .3s ease-in-out;

}

ul.ks-cboxtags li input[type="checkbox"] {

position: absolute;

opacity: 0;

}

ul.ks-cboxtags li input[type="checkbox"]:focus + label {

border: 2px solid #e9a1ff;

}

</syntaxhighlight>

== Accessibilità ==

{{Vedi anche|Accessibilità (web)|Accessibilità (design)|Wai-aria}}

Esempio di codice con tag appositi [[Wai-aria|WAI-ARIA]] per l'[[Accessibilità (web)|accessibilità]]<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role|titolo=ARIA: form role - Accessibility {{!}} MDN|sito=developer.mozilla.org|accesso=2021-02-16}}</ref><ref>{{Cita web|url=https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html|titolo=Checkbox Example (Two State) {{!}} WAI-ARIA Authoring Practices 1.1|sito=www.w3.org|accesso=2021-02-22}}</ref>:

=== Supporto per tastiera ===

{| class="wikitable"

!Chiave

!Funzione

|-

!<kbd>Tab</kbd>

|Sposta lo stato attivo della tastiera su <code>checkbox</code>.

|-

!<kbd>Space</kbd>

|Alterna gli stati selezionati e deselezionati della casella di controllo.

|}

=== Attributi di ruolo, proprietà, stato e tabindex ===

{| class="wikitable"

!Ruolo

!Attributo

!Elemento

!Utilizzo

|-

!

|

|<code>h3</code>

|

* Fornisce un'etichetta di raggruppamento per il gruppo di caselle di controllo.

|-

!<code>group</code>

|

|<code>div</code>

|

* Identifica l'elemento <code>div</code> come contenitore <code>group</code> per le caselle di controllo.

|-

!

|<code>aria-labelledby</code>

|<code>div</code>

|

* L'attributo <code>aria-labelledby</code> fa riferimento all'attributo <code>id</code> dell'elemento<code>h3</code> per definire il nome accessibile per il gruppo di caselle di controllo.

|-

!<code>checkbox</code>

|

|<code>div</code>

|

* Identifica l'elemento <code>div</code> come un file<code>checkbox</code>.

* Il contenuto di testo figlio di questo <code>div</code>fornisce il nome accessibile della casella di controllo.

|-

|

!<code>tabindex="0"</code>

|<code>div</code>

|Include la casella di controllo nella sequenza di schede della pagina.

|-

|

!<code>aria-checked="false"</code>

|<code>div</code>

|

* Indica che non è selezionata<code>checkbox</code> .

* I selettori di attributi CSS (ad esempio <code>[aria-checked="false"]</code>) vengono utilizzati per sincronizzare gli stati di visualizzazione con il valore dell'attributo <code>aria-checked</code>.

* Per supportare le impostazioni del sistema operativo e del browser ad alto contrasto, l'elemento pseudo CSS <code>::before</code> e la proprietà <code>content</code> vengono utilizzati per generare gli indicatori visivi dello stato della casella di controllo.

|-

|

!<code>aria-checked="true"</code>

|<code>div</code>

|

* Indica che è selezionato <code>checkbox</code>.

* I selettori di attributi CSS (ad esempio <code>[aria-checked="true"]</code>) vengono utilizzati per sincronizzare gli stati di visualizzazione con il valore dell'attributo <code>aria-checked</code>.

* Per supportare le impostazioni del sistema operativo e del browser ad alto contrasto, l' elemento CSS <code>::before</code> e la proprietà <code>content</code> vengono utilizzati per generare gli indicatori visivi dello stato della casella di controllo.

|}

Esempio:<syntaxhighlight lang="html">

<h3 id="id-group-label">

Condimenti per Sandeich

</h3>

<div role="group" aria-labelledby="id-group-label">

<ul class="checkboxes">

<li>

<div role="checkbox"

aria-checked="false"

tabindex="0">

Lattuga

</div>

</li>

<li>

<div role="checkbox"

aria-checked="true"

tabindex="0">

Pomodoro </div>

</li>

</syntaxhighlight>

== Voci correlate ==