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-only CSS Pseudo-Klasse wählt Elemente aus (wie bestimmte <input>-Typen und <textarea>), die vom Benutzer nicht bearbeitet werden können. Elemente, auf die das HTML-Attribut readonly 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 id="email" name="email" type="email" value="test@example.com" />
<label for="note">Short note about yourself:</label>
<textarea id="note" name="note">Don't be shy</textarea>
<label for="pic">Your picture:</label>
<input id="pic" 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 id="name" name="name" type="text" value="Mr Soft" readonly />
</div>
<div>
<label for="address">Address: </label>
<textarea id="address" name="address" readonly>
23 Elastic Way,
Viscous,
Bright Ridge,
CA
</textarea
>
</div>
<div>
<label for="postal-code">Zip/postal code: </label>
<input
id="postal-code"
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 id="sms-confirm" name="sms-confirm" type="checkbox" />
</div>
<div>
<label for="instructions">Any special instructions?</label>
<textarea id="instructions" 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 wird jedes 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
Enable JavaScript to view this browser compatibility table.
Siehe auch
:read-write- HTML
contenteditableAttribut