CSS :read-write Pseudo Classe
La pseudo-classe CSS :read-write seleziona gli elementi modificabili dall'utente. Scopri la pseudo-classe e pratica con esempi.
La pseudo-classe CSS :read-write corrisponde a qualsiasi elemento che l'utente può modificare, come un campo di testo in cui può digitare. È una pseudo-classe user-action / input: seleziona gli elementi in base al loro stato di modifica corrente piuttosto che al nome del tag o alla classe, quindi puoi stilare "la casella in cui il visitatore può scrivere" senza aggiungere markup aggiuntivo.
Questa pagina illustra cosa si considera un elemento read-write, la sintassi, un esempio funzionante, la controparte read-only e come :read-write si integra con le pseudo-classi correlate ai form.
Cosa si considera read-write
Un elemento corrisponde a :read-write quando è attualmente modificabile. Ciò include:
- Gli elementi
<input>il cui tipo accetta testo (text, search, url, email, password, number, ecc.) che non sonoreadonlye non sonodisabled. - Gli elementi
<textarea>che non sono néreadonlynédisabled. - Qualsiasi altro elemento che porta l'attributo
contenteditable(ad esempio un<div contenteditable>), che rende modificabile un contenuto altrimenti statico.
Il caso opposto — un campo disabilitato, un campo readonly o qualsiasi elemento non modificabile come un paragrafo — corrisponde invece a :read-only. Ogni elemento è l'uno o l'altro, quindi :read-only e :read-write insieme coprono l'intero documento.
Quando usarlo
Ricorri a :read-write quando vuoi un segnale visivo che un elemento è interattivo:
- Dai ai campi modificabili uno sfondo o un bordo distinto in modo che gli utenti vedano immediatamente dove possono digitare.
- Abbinalo a
:read-onlyper attenuare i campi bloccati (ad esempio, un form del profilo in cui l'email è fissa ma il nome visualizzato è modificabile). - Applica lo stesso stile a una regione rich-text
contenteditablecome agli input nativi per un aspetto uniforme.
Il supporto browser per la pseudo-classe :read-write è ampio nei browser moderni, ma il comportamento di stile può differire. Lo stato di modifica effettivo dell'elemento è sempre corretto — :read-write controlla solo se i tuoi stili vengono applicati — quindi non fare mai affidamento su di esso per altro che la presentazione.
Il selettore :read-only è la controparte del selettore :read-write. Seleziona ogni elemento che non corrisponde a :read-write.
Versione
Sintassi
Esempio di sintassi CSS :read-write
:read-write {
css declarations;
}Qui css declarations sono le regole di stile da applicare a ogni elemento modificabile nella pagina. Di solito si definisce l'ambito della regola (ad esempio input:read-write) in modo che non intercetti anche le regioni contenteditable che si preferisce lasciare invariate.
Esempio del selettore :read-write
Nell'esempio seguente il primo input è modificabile, quindi diventa verde tramite :read-write. Il secondo input è readonly, quindi ricade nella regola :read-only e viene visualizzato in grigio.
Esempio di codice CSS :read-write
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:read-only {
background-color: #ccc;
}
:read-write {
background: lightgreen;
}
</style>
</head>
<body>
<h2>:read-write selector example</h2>
<form>
<div>
<label for="read-write">Example1</label>
<input value="read-write input" id="read-write" />
</div>
<div>
<label for="read-only">Example2</label>
<input readonly value="read-only input" id="read-only" />
</div>
</form>
</body>
</html>Stile di una regione contenteditable
:read-write non è limitato ai campi del form. Qualsiasi elemento con l'attributo contenteditable diventa modificabile e quindi corrisponde a :read-write, quindi puoi dargli la stessa interattività di un vero input:
<!DOCTYPE html>
<html>
<head>
<title>contenteditable + :read-write</title>
<style>
div:read-write {
border: 1px dashed #4caf50;
padding: 8px;
outline: none;
}
</style>
</head>
<body>
<p>Click the box below and start typing:</p>
<div contenteditable>This text is editable.</div>
</body>
</html>Poiché il <div> porta contenteditable, la regola div:read-write viene applicata e la casella ottiene il bordo tratteggiato. Rimuovi l'attributo e la regola non corrisponde più.
Compatibilità con i browser
| Browser | Supporto |
|---|---|
| Chrome | Sì |
| Firefox | Sì |
| Safari | Sì |
| Edge | Sì |
| Opera | Sì |
Selettori correlati
:read-only— la controparte che corrisponde a ogni elemento non modificabile.:disablede:enabled— corrispondono ai controlli del form in base al loro stato disabilitato.:requirede:optional— corrispondono agli input in base al fatto che debbano essere compilati o meno.