Jak stylizować atrybut tylko do odczytu za pomocą CSS?

Obecnie używam readonly = "readonly" do wyłączania pól. Teraz próbuję stylizować atrybut za pomocą CSS. Próbowałem użyć

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

ale z jakiegoś powodu nie działa. Ja też próbowałem

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

to też nie działa.

Jak ustawić styl atrybutu tylko do odczytu za pomocą CSS?

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

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

Zauważ, że textarea[readonly="readonly"]działa, jeśli ustawisz readonly="readonly"w HTML, ale NIE działa, jeśli ustawisz readOnly-attribute na truelub "readonly"za pośrednictwem JavaScript.

Aby selektor CSS działał, jeśli ustawisz go za readOnlypomocą JavaScript , musisz go użyć textarea[readonly].

To samo zachowanie w przeglądarkach Firefox 14 i Chrome 20.

Aby być po bezpiecznej stronie, używam obu selektorów.

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

Aby być bezpiecznym, możesz użyć obu ...

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

Atrybut tylko do odczytu to „atrybut logiczny”, który może być pusty lub „tylko do odczytu” (jedyne prawidłowe wartości). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Jeśli używasz czegoś takiego jak .prop('readonly', true)funkcja jQuery , będziesz potrzebować [readonly], podczas gdy jeśli używasz .attr("readonly", "readonly"), będziesz potrzebować [readonly="readonly"].

Korekta: wystarczy użyć input[readonly]. Włączanie input[readonly="readonly"]jest zbędne. Zobacz https://stackoverflow.com/a/19645203/1766230

Mnóstwo odpowiedzi tutaj, ale nie widziałem tej, której używam:

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

Zwróć uwagę na myślnik w pseudo selektorze. Jeśli dane wejściowe są readonly="false"takie, to również to wychwycą, ponieważ ten selektor wychwytuje obecność tylko do odczytu, niezależnie od wartości. Technicznie falsejest nieważny zgodnie ze specyfikacją, ale internet nie jest idealnym światem. Jeśli chcesz zająć się tą sprawą, możesz to zrobić:

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

textarea działa w ten sam sposób:

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

Należy pamiętać, że html obsługuje nie tylko type="text", ale zabił innych typów tekstowych taka number, tel, email, date, time, url, itd. Każdy musiałby być dodawane do selektora.

Można to zrobić na kilka sposobów.

Pierwszy jest najczęściej używany. Działa na wszystkich głównych przeglądarkach.

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

Podczas gdy powyższy wybierze wszystkie wejścia z readonlydołączonymi, ten poniżej wybierze tylko to, czego chcesz. Pamiętaj, aby zastąpić demodowolnym typem wejścia.

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

To jest alternatywa dla pierwszej, ale nie jest często używana:

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

:read-onlySelektor jest obsługiwany w Chrome, Opera i Safari. Firefox używa :-moz-read-only. IE nie obsługuje :read-onlyselektora.

Możesz również użyć input[readonly="readonly"], ale jest to prawie to samo, co input[readonly]z mojego doświadczenia.

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

Powinniśmy omówić wszystkie przypadki dla pola wejściowego tylko do odczytu ...

wielką literą Tylko

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

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

Jeśli wybierzesz wejście przez id, a następnie dodasz input[readonly="readonly"]tag w css, coś takiego:

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

To nie zadziała. Musisz wybrać klasę nadrzędną lub identyfikator, a następnie dane wejściowe. Coś jak:

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

Moje 2 centy w oczekiwaniu na nowe bilety w pracy: D

Aby pracować we wszystkich przeglądarkach, użyj następujących poleceń:

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