Wie kann man schreibgeschützte Attribute mit CSS formatieren?

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?

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

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

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] {
...
}

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

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.

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.

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

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

Großschreibung des ersten Buchstabens von Nur

input[readOnly] {
      background: red !important;
    }

<input type="text" name="country" value="China" readonly="readonly" />

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.

Verwenden Sie Folgendes, um in allen Browsern zu arbeiten:

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }