Wie kann man schreibgeschützte Attribute mit CSS formatieren?

150

Ich verwende derzeit readonly = "readonly", um Felder zu deaktivieren. Ich versuche jetzt, das Attribut mit CSS zu formatieren. Ich habe es versucht

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

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

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

das funktioniert auch nicht.

Wie kann ich das schreibgeschützte Attribut mit CSS formatieren?

Seidelbast
quelle
12
input[readonly]sollte arbeiten. Stellen Sie sicher, dass es nicht von anderen, spezifischeren Selektoren an anderer Stelle in Ihrem Stylesheet überschrieben wird.
BoltClock
1
Wenn Sie deaktivieren möchten, verwenden Sie das Attribut disabled und nicht schreibgeschützt
Sven Bieder
3
@SvenBieder Readonly und Disabled haben insgesamt ein unterschiedliches Verhalten. Schreibgeschützte Felder, die beim Senden des Formulars an den Server gesendet werden, deaktivierte Felder hingegen nicht.
Naren
3
input[readonly='readonly']funktioniert nur, wenn Sie HTML wie verwenden <input readonly="readonly">, nicht für z <input readonly>. input[readonly]sollte zu beiden passen.
Mathias Bynens
1
!importantsollte funktionieren, um zu überschreiben, es sei denn, Sie haben auch !importantauf der Einstellungsklasse?
Matt K

Antworten:

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

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

Curt
quelle
24
Sie sollten input[readonly]stattdessen readonlyein boolesches Attribut verwenden, das keinen bestimmten Wert hat.
BoltClock
1
@BoltClock Ja. Bitte beachten Sie die Auflösung in der Antwort unten.
Pal R
Wie kann ich es wieder beschreibbar machen? Nur den Klassenstil entfernen?
Renaro Santos
@ RenaroSantos Das ist eine HTML-Änderung. Entfernen Sie readonly="readonly"von Ihrem inputElement.
Curt
Mit IE7 können Sie den Selektor weiterhin mit jQuery
Ladieu verwenden.
69

Beachten Sie, dass dies textarea[readonly="readonly"]funktioniert, wenn Sie readonly="readonly"in HTML festlegen , aber NICHT, wenn Sie das readOnlyAttribut -attribut auf trueoder "readonly"über JavaScript festlegen .

Damit der CSS-Selektor funktioniert, wenn Sie readOnlymit JavaScript festlegen , müssen Sie den Selektor verwenden textarea[readonly].

Gleiches Verhalten in Firefox 14 und Chrome 20.

Um auf der sicheren Seite zu sein, benutze ich beide Selektoren.

textarea[readonly="readonly"], textarea[readonly] {
...
}
Kaka
quelle
18
Sie können auch einfach verwenden textarea[readonly]- jeder textarea[readonly="readonly"]wird garantiert dazu passen.
BoltClock
23

Um sicher zu gehen, können Sie beide verwenden ...

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

Das schreibgeschützte Attribut ist ein "boolesches Attribut", das entweder leer oder "schreibgeschützt" sein kann (die einzig gültigen Werte). 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 am Ende brauchen [readonly], während , wenn Sie verwenden , .attr("readonly", "readonly")dann werden Sie brauchen [readonly="readonly"].


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

Luke
quelle
20

Viele Antworten hier, aber ich habe die von mir verwendete nicht gesehen:

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

Beachten Sie den Bindestrich im Pseudo-Selektor. Wenn die Eingabe ist readonly="false", wird dies auch erfasst, da dieser Selektor unabhängig vom Wert das Vorhandensein von schreibgeschützt erfasst. Technisch falseist nach Vorgabe ungültig, aber das Internet ist keine perfekte 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; }

Beachten Sie, dass HTML unterstützt jetzt nicht nur type="text", sondern eine ganze Reihe von anderen Texttypen einer solche number, tel, email, date, time, url, usw. Jeder müßte an die Wähler hinzugefügt werden.

IAmNaN
quelle
2
Ich auch nicht. LOL Ja, du hast recht! Zur Zeit. :read-onlyund andere Pseudo-Selektoren wurden dem W3C-Standard hinzugefügt und können mit IE 10-Vorschau-Builds 10547 und höher verwendet werden.
IAmNaN
6

Es gibt einige Möglichkeiten, dies zu tun.

Der erste ist der am weitesten verbreitete. Es funktioniert in allen gängigen Browsern.

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

Während der oben stehende alle Eingänge mit readonlyangeschlossenem Eingang auswählt, wählt dieser unten nur das aus, was Sie wünschen. Stellen Sie sicher, dass demoSie den gewünschten Eingabetyp verwenden.

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

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

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

Die :read-onlyAuswahl wird in Chrome, Opera und Safari unterstützt. Firefox verwendet :-moz-read-only. IE unterstützt den :read-onlySelektor nicht.

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

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

Es sollten alle Fälle für ein schreibgeschütztes Eingabefeld abgedeckt werden ...

Serge
quelle
Eingabe: Nur Lesen ist die "Mutabilitäts-Pseudoklasse, die darauf abzielt, das Formulierungsdesign basierend auf deaktivierten, schreibgeschützten und inhaltsbearbeitbaren HTML-Attributen zu vereinfachen". Wie hier erwähnt, css-tricks.com/almanac/selectors/r/read-write-read , Verschiedene Implementierungen sind ziemlich wackelig.
Peater
Das ist seltsam, aber nur die Eingabe [schreibgeschützt] funktionierte für mich in FF 58
Pavel_K
3

Großschreibung des ersten Buchstabens von Nur

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

王小 陌
quelle
2

Wenn Sie die Eingabe anhand der ID auswählen und dann das input[readonly="readonly"]Tag in die CSS einfügen, haben Sie Folgendes:

 #inputID input[readonly="readonly"] {
     background-color: #000000;
 }

Das wird nicht funktionieren. Sie müssen eine übergeordnete Klasse oder ID und dann die Eingabe auswählen. Etwas wie:

 .parentClass, #parentID input[readonly="readonly"] {
     background-color: #000000;
 }

Meine 2 Cent beim Warten auf neue Tickets bei der Arbeit: D.

Softwareplay
quelle
"Wenn Sie den Eingang anhand der ID auswählen" - was das OP nicht ist, wie ist dies relevant? Selbst wenn dies der Fall war, liegen Sie falsch. Sie müssen nur den Nachkommen-Kombinator entfernen.
Quentin
AH ok du meinst ich muss so etwas wie input [readonly = "readonly"] # inputID eingeben? / ich Dummkopf .. Sie haben Recht
Softwareplay
1

Verwenden Sie Folgendes, um in allen Browsern zu arbeiten:

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }
Pal R.
quelle
2
Hoffen Sie also, dass Ihre Zielgruppe nicht bei diesen 2% liegt.
Bacco
Was beinhaltet die Klasse "gesperrt"?
AdiT
$ ('. textBoxClass'). addClass ('gesperrt') enthält 'gesperrt'
Pal R