Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
:read-only
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2020.
Die:read-onlyCSSPseudo-Klasse wählt Elemente aus (wie bestimmte<input>-Typen und<textarea>), die vom Benutzer nicht bearbeitet werden können. Elemente, auf die das HTML-Attributreadonly keine Wirkung hat (wie<input type="radio">,<input type="checkbox"> und alle anderen Nicht-Formularelemente) werden ebenfalls durch die:read-only Pseudo-Klasse ausgewählt. Tatsächlich passt:read-only zu allem, was:read-write nicht passt, wodurch es äquivalent zu:not(:read-write) ist.
Probieren Sie es aus
label,input[type="submit"] { display: block; margin-top: 1em;}*:read-only { font-weight: bold; color: indigo;}<p>Please fill your details:</p><form> <label for="email">Email Address:</label> <input name="email" type="email" value="test@example.com" /> <label for="note">Short note about yourself:</label> <textarea name="note">Don't be shy</textarea> <label for="pic">Your picture:</label> <input name="pic" type="file" /> <input type="submit" value="Submit form" /></form>Syntax
:read-only { /* ... */}Beispiele
Bestätigen von Formularinformationen mit schreibgeschützten oder beschreibbaren Steuerelementen
Ein Anwendungsfall für schreibgeschützte Formularsteuerelemente ist es, dem Benutzer zu ermöglichen, Informationen zu überprüfen und zu bestätigen, die er möglicherweise in ein früheres Formular eingegeben hat (zum Beispiel Versanddetails), während er gleichzeitig in der Lage ist, die Informationen zusammen mit dem restlichen Formular zu übermitteln. Genau das tun wir im folgenden Beispiel.
Die:read-only Pseudo-Klasse wird verwendet, um das gesamte Styling zu entfernen, das die Eingabefelder wie anklickbare Felder aussehen lässt, wodurch sie eher wie schreibgeschützte Absätze aussehen. Die:read-write Pseudo-Klasse hingegen wird verwendet, um dem bearbeitbaren<textarea> ein ansprechenderes Styling zu verleihen.
<form> <fieldset> <legend>Check shipping details</legend> <div> <label for="name">Name: </label> <input name="name" type="text" value="Mr Soft" readonly /> </div> <div> <label for="address">Address: </label> <textarea name="address" readonly>23 Elastic Way,Viscous,Bright Ridge,CA</textarea > </div> <div> <label for="postal-code">Zip/postal code: </label> <input name="postal-code" type="text" value="94708" readonly /> </div> </fieldset> <fieldset> <legend>Final instructions</legend> <div> <label for="sms-confirm">Send confirmation by SMS?</label> <input name="sms-confirm" type="checkbox" /> </div> <div> <label for="instructions">Any special instructions?</label> <textarea name="instructions"></textarea> </div> </fieldset> <div><button type="submit">Amend details and submit</button></div></form>body { font-family: "Josefin Sans", sans-serif; margin: 20px auto; max-width: 460px;}fieldset { padding: 10px 30px 0; margin-bottom: 20px;}legend { color: white; background: black; padding: 5px 10px;}fieldset > div { margin-bottom: 20px; display: flex; justify-content: space-between;}button,label,input[type="text"],textarea { display: block; font-family: inherit; font-size: 100%; margin: 0; box-sizing: border-box; padding: 5px; height: 30px;}input[type="text"],textarea { width: 50%;}textarea { height: 110px; resize: none;}label { width: 40%;}input:hover,input:focus,textarea:hover,textarea:focus { background-color: #eeeeee;}button { width: 60%; margin: 20px auto;}input:read-only,textarea:read-only { border: 0; box-shadow: none; background-color: #dddddd;}textarea:read-write { outline: 1px dashed red; outline-offset: 2px; border-radius: 5px;}Styling von schreibgeschützten Nicht-Formular-Steuerelementen
Dieser Selektor wählt nicht nur<input>/<textarea>-Elemente aus – er wirdjedes Element auswählen, das vom Benutzer nicht bearbeitet werden kann.
<p contenteditable>This paragraph is editable; it is read-write.</p><p>This paragraph is not editable; it is read-only.</p>p { font-size: 150%; padding: 5px; border-radius: 5px;}p:read-only { background-color: red; color: white;}p:read-write { background-color: lime;}Spezifikationen
| Specification |
|---|
| HTML # selector-read-only |
| Selectors Level 4 # read-only-pseudo |
Browser-Kompatibilität
Siehe auch
:read-write- HTML
contenteditableAttribut