Wie formatiere ich das schreibgeschützte Attribut mit CSS?

Lesezeit: 4 Minuten

Benutzer-Avatar
Seidelbast

Ich verwende derzeit readonly=”readonly”, um Felder zu deaktivieren. Ich versuche jetzt, das Attribut mit CSS zu stylen. Ich habe versucht, mit

input[readonly] {
  /* styling info here */
}

aber es funktioniert aus irgendeinem Grund nicht. Ich habe auch versucht

input[readonly='readonly'] {
  /* styling info here */
}

das geht auch nicht.

Wie kann ich das Readonly-Attribut mit CSS formatieren?

  • input[readonly] sollte arbeiten. Stellen Sie sicher, dass es nicht von anderen, spezifischeren Selektoren an anderer Stelle in Ihrem Stylesheet überschrieben wird.

    – BoltClock

    9. März 2012 um 14:04 Uhr

  • Wenn Sie deaktivieren möchten, verwenden Sie das Attribut “disabled” und nicht “readonly”.

    – Sven Bieder

    9. März 2012 um 14:16 Uhr

  • @SvenBieder Readonly und disabled verhalten sich insgesamt unterschiedlich. Schreibgeschützte Felder werden beim Absenden des Formulars an den Server gesendet, deaktivierte Felder jedoch nicht.

    – Naren

    9. März 2012 um 14:21 Uhr

  • input[readonly='readonly'] funktioniert nur, wenn Sie HTML wie verwenden <input readonly="readonly">nicht für zB <input readonly>. input[readonly] sollte beides passen.

    – Mathias Bynens

    9. März 2012 um 14:22 Uhr

  • !important sollte funktionieren, um es zu überschreiben, es sei denn, Sie haben es auch !important in der Einstellungsklasse?

    – Matt K

    9. März 2012 um 14:45 Uhr


Benutzer-Avatar
Curtis

input[readonly]
{
    background-color:blue;
}

https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

  • Du solltest benutzen input[readonly] stattdessen als readonly ist ein boolesches Attribut, das keinen bestimmten Wert haben soll.

    – BoltClock

    22. April 2013 um 15:43 Uhr

  • @BoltClock Ja. Bitte beachten Sie die Auflösung in der Antwort unten.

    – Kumpel R

    22. April 2013 um 15:53 ​​Uhr

  • Wie kann ich es wieder beschreibbar machen? Einfach den Klassenstil entfernen?

    – Renaro Santos

    6. Januar 2014 um 13:00 Uhr

  • @RenaroSantos Das ist eine HTML-Änderung. Entfernen readonly="readonly" von deiner input Element.

    – Curtis

    6. Januar 2014 um 16:15 Uhr

  • Mit IE7 können Sie den Selektor weiterhin mit jQuery verwenden

    – Ladieu

    30. April 2014 um 17:55 Uhr

Beachten Sie, dass textarea[readonly="readonly"] funktioniert, wenn Sie einstellen readonly="readonly" in HTML, aber es funktioniert NICHT, wenn Sie die festlegen readOnly-zuschreiben true oder "readonly" über Javascript.

Damit der CSS-Selektor funktioniert wenn du einstellst readOnly mit Javascript Sie müssen den Selektor verwenden textarea[readonly].

Gleiches Verhalten in Firefox 14 und Chrome 20.

Sicherheitshalber verwende ich beide Selektoren.

textarea[readonly="readonly"], textarea[readonly] {
...
}

  • Sie können auch einfach verwenden textarea[readonly] stattdessen – alle textarea[readonly="readonly"] passt garantiert dazu.

    – BoltClock

    22. April 2013 um 15:43 Uhr

Benutzer-Avatar
Lukas

Sicherheitshalber solltest du beides verwenden…

input[readonly], input[readonly="readonly"] {
    /*styling info here*/
}

Das readonly-Attribut ist ein “boolesches Attribut”, das entweder leer oder “readonly” (die einzigen gültigen Werte) sein kann. http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Wenn Sie so etwas wie jQuery verwenden .prop('readonly', true) Funktion, werden Sie am Ende benötigen [readonly]während wenn Sie verwenden .attr("readonly", "readonly") dann brauchst du [readonly="readonly"].


Korrektur:
Sie müssen nur verwenden input[readonly]. Einschließlich input[readonly="readonly"] ist überflüssig. Siehe https://stackoverflow.com/a/19645203/1766230

Benutzer-Avatar
IAmNaN

Hier gibt es jede Menge Antworten, aber ich habe die von mir verwendete nicht gesehen:

input[type="text"]:read-only { color: blue; }

Beachten Sie den Bindestrich im Pseudoselektor. Wenn die Eingabe ist readonly="false" es wird auch das abfangen, da dieser Selektor das Vorhandensein von Readonly unabhängig vom Wert abfängt. Technisch false ist laut Spezifikation ungültig, aber das Internet ist keine heile Welt. Wenn Sie diesen Fall abdecken müssen, können Sie Folgendes tun:

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea funktioniert genauso:

textarea:read-only:not([read-only="false"]) { color: blue; }

Denken Sie daran, dass HTML jetzt nicht nur unterstützt type="text"aber eine Menge anderer Texttypen wie z number, tel, email, date, time, urlusw. Jedes müsste dem Selektor hinzugefügt werden.

Benutzer-Avatar
Matthäus Campbell

Es gibt einige Möglichkeiten, dies zu tun.

Die erste ist die am weitesten verbreitete. Es funktioniert auf allen gängigen Browsern.

input[readonly] {
 background-color: #dddddd;
}

Während der obige alle Eingänge mit auswählt readonly beigefügt, dieser hier unten wird nur das auswählen, was Sie wünschen. Unbedingt ersetzen demo mit dem gewünschten Eingabetyp.

input[type="demo"]:read-only {
 background-color: #dddddd;
}

Dies ist eine Alternative zum ersten, aber es wird nicht viel verwendet:

input:read-only {
 background-color: #dddddd;
}

Das :read-only Selektor wird in Chrome, Opera und Safari unterstützt. Firefox verwendet :-moz-read-only. IE unterstützt das nicht :read-only Wähler.

Sie können auch verwenden input[readonly="readonly"]aber das ist so ziemlich das gleiche wie input[readonly]meiner Erfahrung nach.

Benutzer-Avatar
Serge

input[readonly], input:read-only {
    /* styling info here */
}

Sollte abdecken alle Fälle für ein schreibgeschütztes Eingabefeld …

Benutzer-Avatar
王小陌

den ersten Buchstaben von Only groß schreiben

input[readOnly] {
      background: red !important;
    }
<input type="text" name="country" value="China" readonly="readonly" />

1333320cookie-checkWie formatiere ich das schreibgeschützte Attribut mit CSS?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy